day-111-one-hundred-and-eleven-20230712-权限校验
权限校验
无权限直接移除需权限校验的视图v-if版
- 登录时拿到用户所有的权限标识列表并保存到vuex中。
- v-if中判断vuex中权限标识列表是否包含有当前v-if对应按钮或视图的权限标识,没有就直接移除。
无权限直接移除需权限校验的视图-自定义指令版
- 登录时拿到用户所有的权限标识列表并保存到vuex中。
- 在自定义指令的inserted阶段中,用
用户调用该全局自定义指令时传入的权限标识
比对用户所有权限标识列表
,如果不存在,就移除该DOM。 - 在需要使用权限标识的标签上,使用该全局自定义指令,并传入一个对应这个标签的权限标识。
无权限直接移除需权限校验的路由-自定义指令版
- 登录时拿到用户所有的权限标识列表并保存到vuex中。
- 在自定义指令的inserted阶段中,用
用户调用该全局自定义指令时传入的权限标识
比对用户所有权限标识列表
,如果不存在,就移除该DOM。 - 在导航栏及历史记录栏中,给路由导航相关的按钮中使用该全局自定义指令,并会话对应于该导航按钮的权限标识。
在全局路由前置守卫中判断无权限则禁止跳转-自定义指令版
- 登录时拿到用户所有的权限标识列表并保存到vuex中。
- 在自定义指令的inserted阶段中,用
用户调用该全局自定义指令时传入的权限标识
比对用户所有权限标识列表
,如果不存在,就移除该DOM。 - 在导航栏及历史记录栏中,给路由导航相关的按钮中使用该全局自定义指令,并会话对应于该导航按钮的权限标识。
- 在全局路由前置守卫中,用
从用户目标路由中拿到的权限标识
比对用户所有权限标识列表
,如果不存在,就跳转回原路由
。
步骤流程
- 登录后,拿到用户所有的权限标识,并存到vuex中。
- 写自定义指令,用于让页面中无权限就不能显示到页面上的按钮直接隐藏就好了。写全局方法,用于让页面中无权限可以显示但不能操作的按钮有个判断的方式。
- 在路由表中把权限写好,定好路由对应的组件。
- 在路由跳转时把无权限访问的地址跳转也进行权限校验,如没权限,提示信息之后就返回。
动态路由-优化第3与第4项
- 事先把路由写好,交给后端。
- 后端根据用户的token,得到一张独属于用户或用户身份的路由表。这张路由表大多是残缺,只有用户有全部权限时才会得到我们交给后端的完整路由表。
- 我们根据后端给的路由表,动态渲染出导航栏。动态添加路由信息,之后跳转时,就根据后端给的路由表对应的路由规则来。
进阶参考
- router-onready - 官方文档
文章来源地址https://www.toymoban.com/news/detail-553406.html
文章来源:https://www.toymoban.com/news/detail-553406.html
到了这里,关于20230712----重返学习-权限校验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!