Vue3 + Vite + Vue Router 4后端返回路由配置动态路由权限管理
25-04-07
slbcun
747℃
0
动态路由
// 路由递归处理 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" }); } };