vue路由权限设置

本篇文章给大家谈谈vue路由权限设置，以及vue菜单权限和路由权限对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、vue 项目路由权限管理实现

2、vue-element-admin路由权限设置

3、vue项目权限管理

vue 项目路由权限管理实现

项目基于 vue-element-admin 基础之上进行开发，感谢 花裤衩 以及为此项目做出贡献的大佬 [社会社会]！

路由数据由后端控制，前端调用接口返回数据；前端拿到数据处理成可使用的路由结构，然后渲染到页面。

为了能提供更多的功能，后端返回的数据结构是在原来菜单结构基础之上有所改动的。

原路由数据结构：

后端返回数据结构：

路由数据采用多级嵌套结构，基本可以满足需求。

拿到接口返回的数据之后还不能直接使用，需要经过一些处理。

在本地的开发，新增页面时，为了方便开发，获取到后端返回的数据之后用了一个方法来合并数据：

temporaryMenuArray 临时路由数组的结构需要跟后端返回的数据结构一致。

使用 setTemporaryMenu :

合并完临时的路由之后就开始进行路由的处理了。

从上面后端返回的数据结构中可以看出，已经和需要处理成的路由很像了，但还是有一些数据没有必要在专门的系统那里维护，所以需要一些其他数据的处理：

routesComponents 为一个手动维护的页面路由文件：

得到的 userCanUseRouteModules 结构如下：

上面数据中的 type 为2、3层级的 component 已经被替换成对应页面的路由模块了。

得到 userCanUseRouteModules 之后，其中 name 为 storeManagement:head 的那一层数据是供头部菜单使用的，其 children 的数据才是需要添加的路由数据：

此时的 asyncRoutes 只放了默认匹配的路由，这个是需要放在所有路由的最后的：

至此对路由的处理结束。

处理路由这一步是放在 router.beforeEach 路由全局前置守卫里的，结合原有的逻辑进行了一些判断处理。

因为路由数据是由后端数据处理得到的，只包含和挂载了当前用户能有权限访问的部分，没有权限访问的路由就没有被 router.addRoutes 添加，所以并没有在路由守卫里对每次路由的跳转都进行校验。

vue-element-admin路由权限设置

1、src/layout/Sidebar/index.vue，以下是控制左侧栏路由是否显示，通过permission_routes找到值从哪来的。

。。。

最终根据router.js,roles来控制各个页面的权限

vue项目权限管理

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

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

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

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

路由守卫 permission.js ：

路由 成## permission.js ：

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

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

vue路由权限设置的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue菜单权限和路由权限、vue路由权限设置的信息别忘了在本站进行查找喔。