vue项目权限管理

1.权限分类

权限管理主要分为后端权限和前端权限。后端权限是关键，主要控制对数据库的操作；前端权限为辅，主要表现在对界面显示、路由导航、按钮显示操作与否、无效请求前端拦截和响应拦截提升用户体验等。

2.前端权限主要思路

    菜单的控制：在登录成功后，会得到后端提供的权限数据。前端根据权限数据，展示对应的菜单；
    界面的控制：

        点击根据用户数据显示的对应菜单，显示不同界面
        如果用户没有登录，手动在地址栏敲入某个需要权限的界面的地址， 则需要跳转到登录界面
        如果用户已经登录，如果手动敲入非权限内的地址，则需要跳转404 界面
    按钮的控制：在某个菜单的界面中， 还得根据权限数据， 展示出可进行操作的按钮，比如删除， 修改， 增加
    请求和响应的控制（接口）：如果用户通过非常规操作， 比如通过浏览器调试工具将某些禁用的按钮变成启用状态， 此时发的请求， 也应该被前端所拦截

3.Vue的权限控制实现

说明：使用mock模拟后端返回数据

path代表路由地址，authName代表菜单名，children代表子菜单，rights代表该菜单下该用户拥有的权限

mockjs配置：

https://blog.csdn.net/qq_34569497/article/details/132496048

import Mock from 'mockjs'

const menuList = [
    {'id': 1, path:'/uploadSpec','authName': "上传spec", icon: 'User', children:[], rights:['view','add','edit','delete']},
    {'id': 2, path:'/showSpec', 'authName': "Spec预览", icon: 'DataAnalysis',children:[], rights:['view','add','edit','delete']},
    {'id': 3, path:'/generateTxt', 'authName': "生成测试数据", icon: 'DataAnalysis',children:[], rights:['view','add','edit','delete']},
    {'id': 4, path:'/generateCronjob', 'authName': "生成转码程序", icon: 'Promotion',children:[], rights:['view','add','edit','delete']},
    {'id': 5, path:'/pdfCompare', 'authName': "PDF文档对比", icon: 'DocumentCopy',children:[], rights:['view','add','edit','delete']},
    {'id': 6, path:'/resourceUpdate', 'authName': "资源更新管理", icon: 'Management',children:[], rights:['view','add','edit','delete']},
    {'id': 7, path:'/generateTestCase', 'authName': "自动生成ST/SIT案例", icon: 'Files',children:[], rights:['view','add','edit','delete']},
    {'id': 8, path:'/userManagement', 'authName': "用户管理", icon: 'User', rights:['view']},
    {'id': 9, path:'/roleManagement', 'authName': "角色管理", icon: 'Stamp', rights:['view']},
]

Mock.mock("/user/login", Mock.mock({
    "code": 200,
    "success": true,
    "data": {
        "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MSwidXNlck5hbWUiOiJhZG1pbiIsIm5pY2tOYW1lIjoi6LaF566hIiwiaWNvbiI6IiIsInJvbGVJZCI6MSwic3ViIjoiYWRtaW4iLCJleHAiOjE2OTI3NzMzNTMsImp0aSI6ImZkNmVkOWZiMjdiYzQxODg5OWRmYmYzNzhlMTMzZmQ0In0.APGpN-i2edKwPQA52LP10aDEM2DZi7G71k8f_njGcpE"
    }
})
)

Mock.mock("/user/me", Mock.mock({
    "code": 200,
    "success": true,
    "data": {
        "id": 1,
        "userName": "admin",
        "nickName": "超管",
        "icon": "",
        "roleId": 1,
        "menuList": menuList
    }
})
)

Mock.mock("/role/delete", Mock.mock({
    "code": 200,
    "success": true,
})
)

 

3.1菜单权限

后端（mock）提供菜单权限数据，根据数据渲染一级和二级菜单，并将数据存到vuex中；

权限数据rightList: setRightList(登录成功后将数据设置到vuex中)
            Home.vue中引入mapState，并在computed中映射到rightList，并将rightList设置到menuList中
            刷新数据后菜单栏消失，将vuex中数据存到localStorage或者sessionStorage中
            退出登录后删除sessionStorage和vuex中的数据（刷新vuex数据，跳转页面后，window.location.reload()）

参考以下：

vue权限管理——菜单权限设置__Jyann_的博客-CSDN博客

3.2界面权限（路由权限）：

判断用户是否登录：token
            什么时机判断登录：路由全局守卫，to.path进行判断 === "/login"直接next(); 否则需要获取token,如果token不存在，跳转到登录页，有则next()
            手动在地址栏敲入地址：没有权限也会显示该界面。
                需要权限控制的页面，使用动态路由进行管理
                登录成功后，根据登录后的rightList用户拥有的权限，动态添加路由规则
                对路由规则和权限字符串进行映射
            router.js中导出，initDynamicRoutes()方法，登录后导入该方法，并遍历rightList，并将路由添加到Home页面的children中

动态路由在刷新后，又不存在了，但是在登录后点刷新操作不会再次登录，所以需要将在App.vue中created()中导入并执行initDynamicRoutes

 详细见以下：

vue3动态路由设置__Jyann_的博客-CSDN博客

3.3 按钮权限：

            按钮也是根据数据显示，数据中有rights属性定义该用户拥有的所有权限。
            实现：使用自定义指令。
                permission.js中created()中方法实现
                initDynamicRoutes给用户对应的router中动态添加meta元数据后，permission.js中通过router.currentRoute就可以获取
                对比指令中指定的role和rightList中的role相同则像有权限，不同则删除
                可禁用元素或者删除

参考我以下文章：

vue权限管理——按钮控制__Jyann_的博客-CSDN博客

3.4(请求和响应控制)接口权限：

            登录后，每次发起请求前携带请求头token
            根据用户权限数据，判断为非权限请求，则拒绝响应：
                判断当前请求的行为
                    restful请求风格
                        get请求-》view
                        post请求-》add
                        put请求-》edit
                        delete请求-》delete请求
                const actionMapping = {
                    'get':'view',
                    'post':'add',
                    'put':'edit',
                    'delete':'delete',
                }
                action中数据和currentRoute中数据不匹配则拒绝请求，return new Promise(new Error("没有操作权限"))
            响应控制:请求返回401，token无效或者后期，则需要跳转到登录界面

详细参考我以下文章：

vue权限管理——请求和响应权限控制__Jyann_的博客-CSDN博客

4.小结 

前端权限控制必须根据后端返回数据实现

菜单控制：vuex和sessionStorage数据必须一致
    界面控制：
        路由导航守卫，防止跳过登录界面
        动态路由可以让不存在权限的界面的路由根本不存在
    按钮控制：
        路由规则中增加路由元数据meta
        通过路由对象可以得到当前路由规则，以及存储在此规则中的meta数据
        自定义指令可以方便的实现按钮控制
    请求和响应控制：
        请求和响应拦截器的使用
        请求方式行为的映射关系，需要请求api规范