vue後臺管理頁面權限管理

一般後臺管理頁面會有不同的權限，每個角色擁有不同的查看頁面的權限

權限實現：用戶信息中攜帶權限頁面標識

先用賬號密碼獲取到token，token獲取用戶信息，用戶信息中包含了網頁需要的內容，一般有姓名、身份、手機號、郵箱，現在多了一個權限頁面的數組

首先設置路由守衛,跳轉頁面的時候，首先判斷是否有token（身份信息），有token還要判斷是否有用戶信息，沒有就調用函數去獲取。

router.beforeEach((to, from, next) => {
      
    if (getToken()) {
        // console.log('store.getters.user', typeof store.getters.user)
        if (store.getters.user === null || typeof store.getters.user.permissionList === 'undefined') {
            // 沒有用戶信息，獲取用戶信息
            store.dispatch('getUserInfo').then(res => {
                let PERMISSIONLIST = store.getters.user.permissionList;
                white_code_list.forEach(ele => {
                    PERMISSIONLIST.push(ele);
                });
                let hasPermission = PERMISSIONLIST.includes(to.name);
                
                if (hasPermission) {
                    next();
                } else {
                    next({
                        name: 'error_401',
                        meta: {
                            title: '你還沒有查看該頁面的權限'
                        }
                    });
                }
            });
        } else {
            // 有用戶信息
            let PERMISSIONLIST = store.getters.user.permissionList;
            white_code_list.forEach(ele => {
                PERMISSIONLIST.push(ele);
            });
            let hasPermission = PERMISSIONLIST.includes(to.name);

            if (hasPermission) {
                next();
            } else {
                next({
                    name: 'error_401',
                    meta: {
                        title: '你還沒有查看該頁面的權限'
                    }
                });
            }
        }
    } else {
        if (white_list.indexOf(to.path) !== -1) {
            // 在免登錄白名單，直接進入
            next();
        } else {
			router.push({
				name: 'login',
				query: {
					returnName: to.name
				}
			});
        }
    }
})

將權限數組保存到store中，接下需要通過該數組來設置我們的導航欄列表，也就是頁面路由，將權限數組中的頁面設置爲可見，這樣不同的角色登錄將會展現不同的頁面導航。

 

export const getMenuByRouter = (list, access) => {
  let res = []
  forEach(list, item => {
    if (!item.meta || (item.meta && !item.meta.hideInMenu)) {
      let obj = {
        icon: (item.meta && item.meta.icon) || '',
        name: item.name,
        meta: item.meta
      }
      if ((hasChild(item) || (item.meta && item.meta.showAlways)) && showThisMenuEle(item, access)) {
        obj.children = getMenuByRouter(item.children, access)
      }
      if (item.meta && item.meta.href) obj.href = item.meta.href
      if (showThisMenuEle(item, access)) res.push(obj)
    }
  })
  return res
}

const showThisMenuEle = (item, access) => {
  for(var i=0;i<access.length;i++){
	  if(access[i]==item.name){
		  return true
	  }
  }
}

上面只是設置了隱藏，路由守衛作用是爲了一些用戶通過網址直接進入到沒有權限的頁面中