前后端分离开发之权限篇，解决陷入死循环。

最新推荐文章于 2025-06-12 09:38:05 发布

a1396537376

最新推荐文章于 2025-06-12 09:38:05 发布

阅读量4.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 前后端分离文章标签： vue 权限死循环

本文链接：https://blog.youkuaiyun.com/a1396537376/article/details/90244415

本文介绍了在Vue项目中实现动态权限菜单及解决路由死循环问题的经验。通过Vuex和localStorage处理用户权限，利用路由守卫确保安全。在实现过程中遇到将处理后的路由表存入localStorage导致的死循环问题，最终通过每次刷新时重新从服务器获取路由表来解决。详细代码和错误示例供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写这篇文章的目的是为了记录两天的成果。。
关于vue权限的参考是从花裤衩大佬那得到的启发

1、首先声明，阅读此博客需要:

vuex 基础
了解mock
了解route/router
权限的实现
路由守卫

2、讲解一下本项目权限的实现：
权限：动态菜单栏，不同用户能看到的页面是不同的，所以，当用户登陆时，服务端判断该用户的权限，返回该用户的路由表–至于按钮级别的权限，可以用页面权限去实现，或者使用v-if命令实现【注意，前台不可以相信，权限还是要后台判断】
路由：vuex+localStorage实现【刷新重新拉取路由表】
3、实现思路+部分代码【后续代码全部贴出】
a.定义一个未登录可以查看的页面–路由守卫第一层判断

const whiteList = ['/login', '/solution/index',
 '/productIntroduction/index', 
'/seo/index', '/contactUs/index', '/farm/index', '/404'] 
// no redirect whitelist 没有重定向白名单
router.beforeEach((to, from, next) => {
  //如果含有token值，也就是处于登陆状态
  if (getToken()) {
  //不允许跳出登陆状态【本系统下规定】
    if (whiteList.indexOf(to.path) !== -1) {
      next({ path: '/' });
      NProgress.done();
    }else {
    .........................
    }

b.因为后台返回的数据是没有经过处理的，所以前台不能直接使用，还需进行一步转换
转换函数如下：递归

function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串，转换为组件对象
  const accessed = asyncRouterMap.filter(route => {
    if (route.component) {
      if (route.component === 'LayoutF') {//Layout组件特殊处理【本系统的布局组件】
        route.component = LayoutF
      } else {
        route.component = _import(route.component) //自定的引入组件的方式
      }
    }
    if (route.children && route.children.length) { //递归调用
      route.children = filterAsyncRouter(route.children)
    }
    return true
  });
  return accessed
}

c.在写本项目时，笔者遇到将经过处理的路由表放入localStorage中，用的时候再取，结果一直遇到陷入死循环的问题，且问题还未解决，大佬路过请指点~~【错误源码见本文尾】
笔者更改方法为每次用户刷新向服务器从新拉取路由表，这样一来，动态修改权限同时也就实现了。
定义一个变量为true，拉取完信息更改其为false，用户刷新则又变为true，这样，我们又多了一个判断条件

 //registerRouteFresh定义为true
  if (registerRouteFresh) {
  //判断vuex中是否含有异步路由表
        if(store.getters.asyncRouterMap.length ===0){
        //从服务器拉取路由表
          store.dispatch('RouteFresh',getToken()).then((data)=>{
          //返回空，则强制退出
            if(data===''){
              quit();
              next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
            }else{
            //如果vuex中含有异步路由表，将异步路由表转换
              GenerateRoutes(store.getters.asyncRou