Vue-Router4 + Pinia 动态权限路由设置

Vue-Router4 + Pinia 动态权限路由设置

在学习动态添加有权限区分的路由时，遇到了许多问题，自学能力低，多次查了官方文档和网上的一些博客才清楚一些。以下是我当时的眼界所想所做，很难不做到愚见，如有错误，敬请指正！

现在先让我来描述下我的场景：

在router文件夹下有个文件path，里面放着静态路由和动态路由；

还有一个index文件，用来初始化和做路由前置守卫；

在Store文件夹下有个user的文件，里面是用pinia生成的一个userStore，放着登录、登出、获取用户信息、获取动态路由信息的方法和一些变量；

在侧边栏那，和头部的面包屑那需要路由的信息；

现在需要我在登录后获取动态路由，再次进入页面时能自动跳转到主页，并在结合侧边栏和面包屑加载页面

一开始我觉得这不简单吗，直接 addRoute() 后在侧边栏的那里用 router.options.routes 获取全部路由遍历即可。

一开始的代码忘了许多，大概这样，会有bug

router.beforeEach(async (to, _from, next) => {
  console.log("守卫");

  if (to.path == "/login") {
    // 如果token值还有且没过期，直接进入主页
    if (getToken()&&!OverdueToken()) {
        next("/");
    } else {
      next();
    }
  } else {
    if (getToken()) {
      if (OverdueToken()) {
      // token过期，执行退出登录操作，删除所有
        userStore.resetTokenSoOn();
        next("/login");
      } else {
      //获取动态路由
        let resulRouter = await userStore.setAllauthorityRoute(getCharacters())
       //添加动态路由
        myAddroutes(resulRouter)
        next("/");
      }
    } else {
      next("/login");
    }
  }
});

我开心的登录来到我的主页，却发现只有静态路由在那，我输出了下router，发现确实没有，难道是我获取动态路由那步有问题？再输出下，没问题呀！打开vue-devtools再走一遍，发现跳转到主页时是已经添加到路由里面去了的，用hasRoute方法来确定我的动态路由确实是添加上去了的，但是却没有相关信息的展示，options里的信息并没有变化。

看看文档怎么说的，

addRoute"添加一个新的路由记录，将其作为一个已有路由的子路由"

options"创建路由器时的原始选项对象"

难道要我直接修改options的routes嘛，试试，相应的你需要在退出登录时在修改回只有静态路由

function myAddroutes(resulRouter: RouteRecordRaw[]) {
  resulRouter.forEach((item: RouteRecordRaw) => {
    router.addRoute(item);
  });
  router.options.routes = [...new Set([...router.options.routes, ...resulRouter])]
}

可以，顺利读取到了

这是另一个权限的（暂时只设置了2个）

也找了些相关博客，确实存在这种情况，解决方法也是直接往routes上修改。

又想了想，我们非要在options.routes上获取吗？

修修改改。。。。

router的index

router.beforeEach(async (to, _from, next) => {

    if (getToken() && !OverdueToken()) {
      if(to.path == '/login'){
        next("/")
      }
      else {
          //刷新后，标识变量也会重置，再次获取路由，不做store持久化
        if (userStore.userRole == false) {
          let resulRouter = await userStore.setAllauthorityRoute(
            getCharacters(),
          );
          // 添加动态路由
          myAddroutes(resulRouter);
          // 重定向
          next({ ...to, replace: true });
        } else {
          next();
        }
      }
    }
    else {
      // 白名单，让登录过去
      if(isWhiteMune(to)){
        next()
      }else{
      next("/login")

      }
    }
});

store的user

    const setAllauthorityRoute = async(username:any) => {
      let routeName: string[] = [];
      await getRouteNameApi({username:username}).then((res:any)=>{
        setKeepRoute(res.data.routerName)
        routeName = res.data.routerName
      })

      let arr = filterrouter(authorityRoute, routeName);
      // 动态路由  
      roleMenu.value = [ ...basicRoute, ...arr]
      // 角色
      userRole.value = true
      return arr
    }

我把动态路由放在了store里，然后让侧边栏的配置函数接收它，这样就完成了。