Vue中为动态角色设计动态菜单（并配置动态路由，递归菜单，处理重定向与死循环、push重定向异常捕获）

最新推荐文章于 2023-05-31 22:07:57 发布

Program W

最新推荐文章于 2023-05-31 22:07:57 发布

阅读量824

点赞数

分类专栏：大前端 Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46037781/article/details/121164943

版权

本文探讨了如何通过动态角色配置和动态菜单管理，实现前后端分离的权限控制。核心内容包括动态路由获取缓存菜单的方法，以及解决重定向导致的无限循环问题。涉及技术包括session、路由守卫和Vue.js中的路由操作。

摘要由CSDN通过智能技术生成

一、思路

动态角色、动态菜单基本都是后端的事情了（两个表的事情）

设计方面：
动态角色：是配置配置两个权限数组，一个放置当前用户的全部角色，一个放置当前用户的当前角色（即一个时候只能使用一个角色）
动态菜单：在每次layout刷新时调当前角色对应的菜单（这个是配置在数据库中，一个角色会给他分配哪些菜单，菜单是由前端先写上全部，然后再自己根据需要来选择）。
动态路由：每次获取到菜单时，存入session缓存中，在需要跳转页面时，通过路由守卫（前置）beforeEach，对缓存中的菜单进行递归获取，然后判断是否能够进入该页面，否则重定向403

二、动态路由获取缓存中的菜单

不多说，上代码！

这个前置路由守卫有一些需要注意的地方，主要是next(),当next('/403')这样内部有值的时候，他会进行重定向（即还要再次进入一次beforeEach）这样尤其容易导致无限循环，所以，后面的else{next()}这样是必须的，不然条件一个不对就一直循环，十分之坑！！！

beforeEach: (to, from, next) => {
   
//获取session缓存
          const m = getStorage(MY_MENU_CACHE_KEY)
          //标记是否能够进入
          let bo = false
          //这是递归菜单的路径（因为是多重children的对象）
          const