Vue3 + Vite + Vue Router 4后端返回路由配置动态路由权限管理

动态路由

// 路由递归处理
const AllRouter = import.meta.glob('@/views/**/*.vue');
interface RouterItem {
  path: string;
  name: string;
  component: () => any;
  children?: RouterItem[];
  meta: {
    title: string;
    icon: string;
  };
}
const routerFormat = (routerList: any): RouterItem[] => {
  if (!routerList || !Array.isArray(routerList)) return [];
  return routerList.map((item: any) => {
    return {
      ...item,
      component: AllRouter[`/src/views/${item['component']}`],
      children: routerFormat(item['children'])
    };
  });
};
// 动态路由挂载
const addDynamicRoutes = (layoutRoute: RouteRecordRaw | undefined, page: RouteLocationNormalizedLoaded) => {
  const newRouteStr = localStorage.getItem('routerList');
  if (layoutRoute && newRouteStr && layoutRoute.children!.length < 1) {
    const newRouteArr = routerFormat(JSON.parse(newRouteStr) as RouteRecordRaw[]);
    layoutRoute.children = newRouteArr;
    router.addRoute(layoutRoute);
    router.push(page);
  }
};

路由守卫

// 路由守卫
router.beforeEach(async (to, from, next) => {
  // 每次请求判断动态路由是否挂载
  const layoutRoute: RouteRecordRaw | undefined = router.options.routes.find(route=> route.name === 'Layout');
  addDynamicRoutes(layoutRoute, to);
  // 路由拦截规则
  const TOKEN_STATIC: string | null = localStorage.getItem('session');
  if (to.path === '/login' && TOKEN_STATIC) {
    next('/Layout');
  } else {
    !TOKEN_STATIC && to.path !== '/login' ? next('/login') : next();
  }
});

Login获取路由信息

// 路由递归处理
const routerFormat = (routerList: any[]): any[] => {
  if (!routerList) return [];
  return routerList.map((item: any) => {
    return {
      path: item['url'],
      name: item['title'],
      component: item['component'],
      children: routerFormat(item['children']),
      meta: {
        title: item['title'],
        icon: item['ico']
      }
    };
  });
};
// 获取用户信息
const getUserInfoFn = async (session: any) => {
  localStorage.setItem('session', session);
  const res = await getUserInfo();
  if (res.code == 0) {
    const routerList = routerFormat(res.data.router_list);
    localStorage.setItem('userInfo', JSON.stringify(res.data.user_info));
    localStorage.setItem('routerList', JSON.stringify(routerList));
    router.push({ name: 'Layout' });
  }
};