vue-element-admin自定义权限管理

进入正题,今天主要讲权限管理。

首先要了解流程

1. 登录：用户填写正确的账号密码并进行校验，通过后，后台会返回给你token以及此用户的所有权限（权限的返回接口需要和你的专属后台协商）；
2. 存储：拿到权限列表后，需要自己处理成数组的形式，然后利用强大的vuex存储起来；
3. 权限验证：动态根据用户的 权限 算出其对应有权限的路由，通过 router.addRoutes 动态挂载这些路由。

登录&存储

1. 找到mock=>user.js,先mock一个假的数据（最好根据真实的接口），上代码：

2. 打开store=>modules=>user.js,在state中新增perms，如下图：

3. 在本文件中的获取用户信息的方法中，将权限列表处理成一维数组的形式，并加在data中以及赋值给state.perms:

4. 打开getters.js，添加perms: state => state.user.perms

权限验证

1. 打开src=>permission.js,利用beforeEach钩子函数,判断如果有token继续下一步，否则去登录；由于之前框架中是以角色进行区分，不满足我们的需求，所以这里需要改动，将其变成我们想要的。

2. 由上图可看到，要先进行验证，通过后拿到本角色可以跳转的路由，然后将路由挂载到路由表中。验证的方法就是图中的generateRoutes，我们要找到这个方法进行修改：打开store=>modules=>permission.js，进行如下修改：

解释：我们想要的是按照自定义的权限进行区分，所以我们接收的参数至少要有权限列表和角色，我这里为了省事就将整个data全部接收回来了。如果是超级管理员，是享有最高权限的，比较牛逼，所以我们直接赋予他所有的路由，但是如果不是超级管理员，我们就要根据权限去筛选一下路由表了，模板很人性化的为我们提供好了筛选的函数，就是filterAsyncRoutes方法。
3. 在本文件中找到filterAsyncRoutes方法，稍稍进行修改，我红框标注的要注意，不要落下：

路由

真开心，到了最后一步
打开router=>index.js,找到asyncRoutes，能写在这里的路由都是有身份的路由，需要权限的，也正是我们所需要的的，小伙伴可以自行修改了：

OK 大功告成