vue实现页面权限中的菜单配置

Posted 2023-04-25

参考技术A

通过一个数组渲染菜单，实现页面权限的自动配置。

n级菜单有n-1级菜单构成......以此类推可得：多级菜单就是通过二级菜单循环构成。在element-ui中找到 NavMenu 导航菜单 组件，使用该组件做一个二级菜单的循环体组件。菜单数据存储在vuex中。

在组件中判断是否有子集来加载不同的模块。二级菜单内部通过插槽来加载循环生成的一级组件数组，如下 list-item 组件

index属性可以用菜单对象中的任意属性代替只需要它是唯一的

从后台获取不同角色的不同菜单数据，再通过两个递归函数来渲染菜单和动态添加菜单路由，实现页面的权限配置。

https://erpang123.github.io/router-demo/dist-demo/index.html

完整案例： https://github.com/erpang123/router-demo

vue项目权限管理

参考技术A

首先，权限管理 般需求是两个： 权限和按钮权限。

前端 案会把所有路由信息在前端配置，通过路由守卫要求 户登录， 户登录后根据 过滤出路由表。 如我会配置 个 asyncRoutes 数组，需要认证的 在其路由的 meta 中添加 个 roles 字段，等获取 户 之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该 户能访问的 ，最后通过 router.addRoutes(accessRoutes) 式动态添加路由即可。

后端 案会把所有 路由信息存在数据库中， 户登录的时候根据其 查询得到其能访问的所有 路由信息返回给前端，前端再通过 addRoutes 动态添加路由信息。

按钮权限的控制通常会实现 个指令，例如 v-permission ，将按钮要求 通过值传给v-permission指令，在指令的 moutned 钩 中可以判断当前 户 和按钮是否存在交集，有则保留按钮， 则移除按钮。

路由守卫 permission.js ：

路由 成## permission.js ：

动态追加路由## permission.js ：

服务端返回的路由信息如何添加到路由器中？