vue3动态路由，进行角色权限控制

完整源码：

let routerMark = false;
router.beforeEach(async (to, from, next) => {
  let token = localStorage.getItem("token");
  if (to.path === "/login") {
    next();
  } else {
    if (token) {
      //判断是否已经动态添加过路由
      if (routerMark) {
        next();
      } else {
        let modules = import.meta.glob("@/views/**/*.vue"); //载入所有页面
        let node = await post("api/Admin/getRoleNode");//获取登录角色的路由
        const { activeRoutes, bottonPower } = toRefs(useSysStore());
        activeRoutes.value = node.data;
        //获取页面按钮
        node.data.forEach((v: any) => {
          if (v.type === routerTypeName.button){
            bottonPower.value.push(v.url as never);
          }
        });
        node.data.forEach((v: any) => {
          // 过滤判断菜单类型不包含页面按钮
          if (v.type != routerTypeName.button) {
            router.addRoute({
              path: v.url,
              name: v.name,
              component: modules[`/src/views/${v.component}.vue`],
            });
          }
        });
        //动态添加404页面，否则会导致登录后直接进入404页面
        router.addRoute({
          path: "/:pathMatch(.*)*",
          name: "404",
          component: notFound,
        });
        next({ ...to, replace: true });
        routerMark = true;
      }
    } else {
      next({
        path: "/login",
      });
    }
  }
});
export default router;

踩坑1：

用import引入报错

component: () => import(`@/views${v.component}t.vue`),

需要用下面这种，载入所有页面，然后再用modules引入

let modules = import.meta.glob("@/views/**/*.vue"); //载入所有页面

component: modules[`/src/views/${v.component}.vue`],

踩坑2：

router.addRoute动态引入的路由，首次进入页面需要next({ ...to, replace: true });方式才能进入

因为router.addroute是异步的，直接next会导致页面还没载入就进入

next({ ...to, replace: true });

踩坑3：

如果项目中配置了/:pathMatch(.*)页面，需要用动态路由的方式引入，

否则会导致加了next({ ...to, replace: true });方式，也会进入404页面

        //动态添加404页面，否则会导致登录后直接进入404页面
        router.addRoute({
          path: "/:pathMatch(.*)*",
          name: "404",
          component: () => import("@/views/sys/notFound.vue"),
        });

上一篇：合并数组中id为重复的数据

下一篇：nodejs批量处理本地文件