vue后台管理页面权限管理

最新推荐文章于 2024-08-08 18:15:31 发布

console.log( )

最新推荐文章于 2024-08-08 18:15:31 发布

阅读量695

点赞数

分类专栏： # vue

本文链接：https://blog.csdn.net/KingJordon/article/details/105203392

版权

vue 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一般后台管理页面会有不同的权限，每个角色拥有不同的查看页面的权限

权限实现：用户信息中携带权限页面标识

先用账号密码获取到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
	  }
  }
}

上面只是设置了隐藏，路由守卫作用是为了一些用户通过网址直接进入到没有权限的页面中