vue权限控制攻略(iview-admin)

vue权限控制攻略(iview-admin)

作者:轻酌~浅醉

1,方式

在meta中添加access
在这里插入图片描述

只显示在当前用户组中定义的
在这里插入图片描述
第一个参数为当前要访问的页面的name传进去 ,第二个参数为用户的权限字段列表(登录之后通过接口获取)
canTurnTo会通过第二个参数(用户的权限字段列表)进行匹配,如果当前页面,当前用户是有权限的,显示当前页面,否则跳转到401页面

2,通过服务端返回一个路由列表,从而进行一个过滤,动态的把过滤出来的路由列表挂载在路由实例中

eg:在mork中的user.js中进行模拟后台响应的数据
在这里插入图片描述
为true,代表可以访问这个页面
为false代表访问不了
component,代表组件级别的路由权限
这种方式有一个弊端,路由实例里每一个路由都要有一个name
并且不能和path重复
在这里插入图片描述

将不需要权限控制的路由分离出来
在这里插入图片描述
将默认导出的路由更改为非默认导出
在这里插入图片描述
待会进行权限过滤时候,过滤的就是routerMap数组,匹配不到直接显示404页面
在router文件夹引入的时候

在这里插入图片描述

更改为
在这里插入图片描述
接下来,通过接口,拿到用户可以访问哪些的接口列表,
跟这个表比较
在这里插入图片描述
进行筛选,如果结果为true,添加进去,为false,不添加

给store文件夹中的model文件夹添加一个文件router.js,专门用来管理路由----

在这里插入图片描述
在这里插入图片描述
routers为最后挂载在路由实例的路由

待会在此处添加一个合并路由列表的方法
在这里插入图片描述

定义actions
在这里插入图片描述
最后导出
在这里插入图片描述

在store文件夹下的index.js加载
在这里插入图片描述
在这里插入图片描述

为了演示,注释·持久化插件
在这里插入图片描述
在router文件夹的index.js注释
在这里插入图片描述
写一个新的
1,存一个状态
在这里插入图片描述
默认是false,如果你调接口获取到了用户的权限列表之后,把它设为true,如果是false,说明还没有获取调权限列表接口
在这里插入图片描述
调接口拿到列表
在这里插入图片描述
调第二个接口(赛选过滤方法)
在这里插入图片描述
通过dispatch合并路由列表----store中的router.js文件
注意:
在这里插入图片描述
entries可以把对象转为数组,第一个值为当前的属性名,第二个值为属性值
在这里插入图片描述

如果所有列表都可以访问
直接赋值
在这里插入图片描述
如果不是所有列表都可以访问,用递归做筛选
在这里插入图片描述
得到列表之后进行合并,通过commit进行修改
在这里插入图片描述
commit为store方法调用方式
合并需要注意合并前后问题
在这里插入图片描述
这个路由对象一定要写在所有路由的最后面
在这里插入图片描述
修改权限列表状态
在这里插入图片描述
整理好的路由列表resolve出去,这样,在router文件首页就可以直接获取到
在这里插入图片描述
调用前面创建好的路由实例中的addRouters方法,参数写我们拼接好的路由列表,给它动态的挂载上去
在这里插入图片描述
挂载完之后,调用
在这里插入图片描述
如果出现异常,跳转到login中
在这里插入图片描述
在这里插入图片描述
这个错误原因是因为我们不该使用store里面的原始对象,而要进行一个深拷贝
在这里插入图片描述
深拷贝
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43436432/article/details/84374700