vue 动态权限控制

• 权限控制主要分为两个部分 页面 和 路由。

页面控制

• 根据后端返回的权限，通过条件匹配，展示动态的权限页面。

路由控制

• 将路由分为两部分：静态路由 和 动态路由。
  • 静态路由可以让所有人访问。
  • 动态路由只能让拥有该路由权限的人访问。

动态路由如何设置🔨

• 首先将需要动态匹配的路由放入动态路由文件中，或者让后端返回需要动态匹配的路由。

const dynamicRouter: RouteRecordRaw[] = [
    {
      path: "/test/a",
      name: "a",
      component: () => import("@/views/a/index"),
      meta: {
        roles: ["a"],
      },
    },
    {
      path: "/test/b",
      name: "b",
      component: () => import("@/views/b/index"),
      meta: {
        roles: ["b"],
      },
    },
  ]

• 在用户完成登录后，在路由拦截函数router.beforeEach中，获取用户的访问权限。并且根据权限动态匹配符合条件的路由。

router.beforeEach(async (to, from, next) => {
  if(!store.state.role){
    await store.dispatch("GET_ROLE");
    const role = store.state.role;
    dynamicRouter.forEach((item: any)=>{
      if(item.name === 'NotFound'){
        router.addRoute(item);
        return;
      }
      if(!item.meta.roles.includes(role)) return;
      if (item?.meta?.parentName) {
         router.addRoute(item.meta.parentName, item);
      } else {
         router.addRoute(item);
      }
    });
    next({...to, replace:true})
  }else{
    next();
  }
})

在匹配动态路由时遇到的坑🕳

1. 当输入路由中没有匹配的url时，显示找不到匹配的路由，需要达到的效果应该是跳转到404页面。

• 
• 原因：路由中没有配置 { path:"/:catchAll(.*)", redirect:"/404", name:"NotFound" } 匹配不存在的路由，并且要放在动态路由中。若放在静态路由中，当输入动态路由的url，会直接跳转到404页面。因为动态路由是异步的，所以正则路由要放在动态路由中。

2. 配置动态路由之后，刷新动态路由会进入空白页面

• 原因：配置完成动态路由之后，若执行next()不传递任何参数，会执行管道下个钩子函数，若所有钩子函数执行完成，导航状态会变成comfirmed。不再重新匹配路由，导致页面没有匹配到路由显示空白。所以需要动态路由加载之后，重新刷新导航匹配路由，next({...to,replace:true})。