AntDesignProofVue---权限管理详解
最近这段时间主要在研究AntDesignPro of Vue这套前端框架,框架中的权限管理部分可以说是整套Pro模板的精华,但⽹上对于这⼀部分的解析实在是少之⼜少,对于⼀些刚刚接触这套框架的新⼿不友好,今天这篇⽂章希望能帮助到⼤家能更快的理解这套框架
⾸先,官⽅提供了Github的地址,我们可以通过这个地址获取最新的Pro版本代码
$ git clone --depth=1 github/sendya/ant-design-pro-vue.git my-project
官⽅的Pro版本代码默认是开启Eslint代码验证格式,在我们个⼈开发过程中会稍显⿇烦(但多⼈协同开发,保证代码统⼀性,不建议关闭)
关闭AntDesignPro of Vue中的Esint
系统的初始账号密码为admin,admin(管理员账号),此账号默认拥有系统路由中所有菜单以及按钮的权限
权限管理主要涉及以下⼏个⽂件
1.src–permissions.js 路由守卫(路由权限控制)
2.src–config–fig.js 配置路由信息
(Pro 中的路由为了⽅便管理,使⽤了中⼼化的⽅式,在 fig.js 统⼀配置和管理。)
3.src–store–modules–permission.js 获取登陆⽤户信息以及权限
4.src–store–modules–user.js 权限与路由进⾏相互匹配(鉴权)
权限管理主要流程:
⾸先获取登录⽤户基本信息以及权限
代码位置 src–permission.js
在permission.js通过路由守卫,捕获到⽤户的登录事件
⾸先在登录时将⽤户的token信息存储在本地,路由守卫中通过storage⽅法将token取出进⾏判断,若token为空,系统还通过whiteList 定义了免登录⽩名单检验,⽩名单中的这⼏个路由地址,⽆需token即可登录
其次,系统还会进⾏重复性的验证,若此账号登陆过本系统,这个账号的权限信息就会存储在vuex中,当第⼆次登录的时候,⽆需通过登录页,直接进⼊系统
如果该账号是第⼀次登录系统,未在本地获取到任何相关信息,则正式进⼊我们今天的主题权限管理
通过Getinfo⽅法,发起请求获取这个账号的权限信息
路径地址:src–store–modules–user.js
我们通过Getinfo⽅法可以获取登陆⽤户的权限信息,但是返回的信息的权限是基于不同板块,不同功能所展⽰,数据格式不⽅便我们接下来要进⾏的⼯作,我们理想的信息获取格式是⼀个数组,所以这⾥使⽤map⽅法进⾏数据处理,map⽅法会返回给我们⼀个新的数组,⾥边存储的就是我们想要的权限信息格式(下⽂会⽤到)
vuejs流程图插件
之后我们将map返回的权限相关信息存储到vuex中,这样我们就能全局获取到这个⽤户的权限了
同时将登录⽤户的账号权限信息return回permission.js中继续下⼀步操作
我们获取⽤户权限信息的⽬的就是拿⽤户权限与路由表进⾏匹配,筛选出与之相符合的路由,我们把视线转移到permission.js中,当获取到⽤户的权限信息后,下⼀步操作就是要去匹配路由表了
在GetInfo的回调函数内,调⽤了GenerateRoutes⽅法,我们需要做的就是将在GetInfo中获取到的⽤户账号信息以参数的⽅式传递到GenerateRoutes中
路径地址:
src–store–modules–permission.js
在GenerateRoutes⽅法中定义了accessedRouters参数,这个参数其实就是我们最终想要的根据账号权限匹配后的正确路由,但获取这个参数我们主要经历了如下⼏个步骤:
第⼀步
定义过滤器filterAsyncRouter⽅法,此⽅法接收两个参数
routerMap:系统中全部路由表
调⽤位置在src–store–modules–permission.js的第⼀⾏
import{ asyncRouterMap, constantRouterMap }from'@/fig'
roles:我们传递过来,登陆⽤户的权限信息
此⽅法接收两个参数,⼀个参数是系统中的全局路由,⼀个是我们传递过来的⽤户权限信息,通过js
的filter⽅法,进⾏过滤操作,这⾥⽤到了es6语法中的箭头函数,其实箭头符号后的关键字route,我们就可以理解成将整个路由表进⾏循环解析后的每单条路由信息
解析2:⼀个⽐较复杂的路由表肯定是有相对应的⽗⼦级别关系,AntDesignPro of Vue这套框架菜单是根据路由配置来⽣成。嵌套路径与路由表⾼度耦合。所以我们在进⾏权限匹配的时候,不能只匹配⽗级路由的权限,若出现⽗路由下的某个⼦路由权限与⽗路由不同,鉴权操作则会失败,
举个栗⼦:
若不进⾏步骤2的操作,此时我⽤权限为‘user’的账号登陆系统,‘admin’这条⼦路由也会被循环出来,这不是我们想要的结果
所以这⼀步的操作是为了遍历⼦路由,使系统更严谨。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。