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项目实战32权限管理-实现角色列表

VUE项目实战31权限管理-实现权限列表

vue后台项目基于RBAC实现权限管理

Vue项目实战:电商后台管理系统(Vue+VueRouter+Axios+Element)

Vue项目实战:电商后台管理系统(Vue+VueRouter+Axios+Element)

如何在 vue 中添加权限控制管理?---vue中文社区