vue项目权限管理
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目权限管理相关的知识,希望对你有一定的参考价值。
参考技术A首先,权限管理 般需求是两个: 权限和按钮权限。
前端 案会把所有路由信息在前端配置,通过路由守卫要求 户登录, 户登录后根据 过滤出路由表。 如我会配置 个 asyncRoutes 数组,需要认证的 在其路由的 meta 中添加 个 roles 字段,等获取 户 之后取两者的交集,若结果不为空则说明可以访问。此过滤过程结束,剩下的路由就是该 户能访问的 ,最后通过 router.addRoutes(accessRoutes) 式动态添加路由即可。
后端 案会把所有 路由信息存在数据库中, 户登录的时候根据其 查询得到其能访问的所有 路由信息返回给前端,前端再通过 addRoutes 动态添加路由信息。
按钮权限的控制通常会实现 个指令,例如 v-permission ,将按钮要求 通过值传给v-permission指令,在指令的 moutned 钩 中可以判断当前 户 和按钮是否存在交集,有则保留按钮, 则移除按钮。
路由守卫 permission.js :
路由 成## permission.js :
动态追加路由## permission.js :
服务端返回的路由信息如何添加到路由器中?
以上是关于vue项目权限管理的主要内容,如果未能解决你的问题,请参考以下文章
Vue项目实战:电商后台管理系统(Vue+VueRouter+Axios+Element)