惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
DataBreaches.Net
MongoDB | Blog
MongoDB | Blog
GbyAI
GbyAI
L
LangChain Blog
B
Blog
博客园 - 三生石上(FineUI控件)
Martin Fowler
Martin Fowler
博客园 - 【当耐特】
Recent Announcements
Recent Announcements
P
Proofpoint News Feed
U
Unit 42
Last Week in AI
Last Week in AI
WordPress大学
WordPress大学
有赞技术团队
有赞技术团队
雷峰网
雷峰网
Microsoft Security Blog
Microsoft Security Blog
T
The Blog of Author Tim Ferriss
爱范儿
爱范儿
小众软件
小众软件
I
InfoQ
G
Google Developers Blog
大猫的无限游戏
大猫的无限游戏
人人都是产品经理
人人都是产品经理
C
Check Point Blog

韩小韩博客

你还在用真实邮箱注册网站?等等,你真的想清楚了吗? IPFS星际文件系统 最新二合一收款码 - 物理合并版 从Hexo到Astro博客1分钟迁移指南 Astro 添加 Waline 评论组件 腾讯云 EdgeOne Pages 实测对比:能否成为国内开发者的 Cloudflare Pages 最佳平替? Astro 中使用 Lenis 增加鼠标滚动阻尼感 一组手机和电脑动态壁纸分享【分享】 Astro 添加 Twikoo 评论组件 Astro主题-优雅的vhAstro-Theme【使用文档】 Fetch的GET、POST简单HTTP请求封装 一些实拍的手机壁纸 大理And威海【图】 很喜欢西湖的水【转自:狮子狮子鱼】 Tarot-塔罗牌占卜 Web Watermark 图片添加水印在线小助手 HanAnalytics访问分析Web统计托管于(Cloudflare Pages) 基于AI的微博动态心情分析 阿里云免费用9年ecs教程【适合轻量化服务如frp】 Cloudflare优选IP➕DnsPod的DDNS自动切换 混沌神器Clash全家桶 卷王都在用的变态休息法 NodeJs文本相似度去重脚本 骤雨重山无限存储图床托管于(Cloudflare Pages) 分享好看的天空和云(长期更新) Typecho转到Hexo(主题由Typecho-Joe-Theme转Butterfly主题) Typecho评论导出为Hexo的Valine、Twikoo等评论所支持的JSON文件 Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题 拼夕夕快速提现100元攻略 2024 平安喜乐
Vue3 + Vite + Vue Router 4后端返回路由配置动态路由权限管理
.𝙃𝙖𝙣 · 2026-04-11 · via 韩小韩博客

avatar

.𝙃𝙖𝙣

一点 0分钟

Code

动态路由

// 路由递归处理
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" });
	}
};
Vue Vite 动态路由 权限