如何进行权限控制

Youky ... 2021-10-11

Vue

About 2 min

# 如何进行权限控制

# 一、根据登录状态控制不同页面的访问权限

首先，在定义路由时在元信息中定义是否需要登录权限

const router = [
    {
        path:'/login',
        name: 'login',
    },
    {
        path: '/foo',
        name: 'foo'
        meta:{
            needLogin: true
        }
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13

在全局路由守卫中，每次跳转时判断当前权限状况

router.beforeEach((to, from, next) => {
    const { needLogin = false } = to.meta;
    const { isLogin = false } = router.app.$options.store.state;
    if(needLogin && !isLogin){
        next({
            name: 'login',
            params: {
                redirectPage: to.name, // 登录成功后，可以直接跳转到目标页面
            }
        })
    }else{
        next();
    }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 二、根据用户角色控制不同页面的访问权限

由于可能存在多种角色，控制权限会更为复杂。且不同角色的权限可能是会变的，因此具体权限应该交由后端控制。

将路由划分为两部分：
- 所有登录的用户都能访问的（对于登录与否的控制，同上）
- 特定角色才能访问的
用户登录后，后端判断用户角色，以及有权访问的路由列表
前端拿到用户可访问路由列表后，使用router.addRoute动态添加这些路由对象

# 角色切换后的权限问题

若用户从管理员切换到普通用户，此前的路由已经添加了，因此切换后仍可以访问。

解决办法有两种：

退出登录时，刷新浏览器。缺点是用户体验差
退出登录时，使用router.removeRoute清空所有路由对象，然后在将所有用户能访问到的路由依次添加

# 三、对于页面具体内容的权限控制（具体到按钮级别）

前两种方案都是页面级别的控制，即不同用户可以访问不同页面，而有时候需要控制更具体的页面中的具体内容。

首先对权限的不同级别做出定义：比如用户分为：游客（1）、登录用户（2）、管理员（3）
对于具体部分需要的权限做出定义：比如查看列表没有限制、新增按钮需要登录、修改按钮需要管理员权限
使用自定义指令，将权限绑定到具体的DOM结构中

Vue.directive('permission', function(el, binding){
    const permission = binding.value;
    const { role } = store.state;
    if(permission > role){
        // 不符合权限要求
        el.parentElement.removeChild(el);
    }
})

1
2
3
4
5
6
7
8