Vue3 路由守卫与权限路由怎么设计提示词（导航守卫流程、动态路由、Pinia 登录态、刷新后 404）
用 Vue 3 做后台或带登录的站点，要按角色显示不同菜单和页面时用。填入登录方式、权限来源和路由清单，AI 给出路由分层、全局守卫的判断流程、刷新后恢复登录态与动态路由的办法，以及退出登录时的清理代码。
通用大模型 对话模型通用
你是熟悉 Vue 3 全家桶的前端负责人。我要做（或修）一套「登录态 + 权限路由」，请按下面的顺序给方案。 【项目信息】 Vue 与 Vue Router 版本：[Vue 与 Router 版本] 登录与令牌方式：[登录与令牌方式] 权限数据从哪来：[权限来源]（例：登录后接口返回角色码和可访问菜单） 路由清单：[路由清单] 目前遇到的问题（可选）：[现有问题] 【要你给的东西】 一、路由分层。哪些是不需要权限的静态路由（登录页、错误页），哪些要等拿到权限后用 addRoute 动态添加；每条路由的 meta 里放什么（是否公开、所需权限码、标题）。 二、全局前置守卫的判断流程。用编号写成决策步骤，依次覆盖：目标是公开页；没有令牌；有令牌但用户信息和动态路由还没加载；加载失败；已加载但无权访问；已登录又访问登录页。每一步写清返回什么（放行、重定向到哪、带不带回跳地址）。 三、刷新后的恢复。Pinia 的状态存在内存里，刷新即清空，请说明：令牌存在哪里以及各自的风险；动态路由如何在刷新后的第一次导航里重新添加；为什么通配的 404 路由要放到动态路由之后再加，否则刷新会直接落到 404。 四、退出登录与切换账号。怎样移除已添加的动态路由、重置 store，避免上一个账号的菜单残留。 五、代码。给出守卫、用户 store、动态路由生成三段关键代码；要求在守卫函数内部获取 store，不要在模块顶层获取。 六、边界提醒。明确写出：前端路由控制只是体验层，每个接口必须在服务端各自校验权限；按钮级的显示隐藏同理。 Router 的写法以我所用版本的官方文档为准，版本间有差异的地方标「需核对」。
高亮处换成你自己的内容：[Vue 与 Router 版本]、[登录与令牌方式]、[权限来源]、[路由清单]、[现有问题]
ChatGPT Plus 充值
已被复制 0 次
使用说明
怎么填变量：[权限来源] 决定了动态路由怎么生成：后端直接返回菜单树，就把菜单映射成路由记录；后端只返回角色码或权限码，就在前端维护一份完整路由表再按权限码过滤。[路由清单] 列出路径和谁能看即可，如「/orders 运营、管理员；/finance 仅管理员」。[现有问题] 写现象，例如「刷新后白屏」「切换账号还能看到上一个人的菜单」。
常见问题与调整：
- 刷新后进了 404 → 追问：「按我的代码检查通配路由的添加时机，以及守卫里添加完动态路由后是否重新导航到了原地址。」
- 守卫里出现无限重定向 → 追问：「逐步推演未登录用户访问 /orders 时守卫每次的返回值，找出循环发生在哪一步。」
- 还要控制按钮 → 追问：「补一个按权限码控制元素显示的自定义指令，并说明它不能代替接口鉴权。」
示例输出
示例，仅供参考（后端返回权限码，前端按权限码过滤路由，守卫节选）
判断流程：公开页直接放行 → 没有令牌则去登录页并带上回跳地址 → 有令牌但路由未加载，先加载并添加，再重新导航 → 其余放行。
ts
router.beforeEach(async (to) => {
const user = useUserStore() // 在守卫内部获取 store
if (to.meta.public) return true
if (!user.token) return { path: '/login', query: { redirect: to.fullPath } }
if (!user.routesLoaded) {
const routes = await user.loadRoutes() // 拉取权限并生成路由记录
routes.forEach((r) => router.addRoute('layout', r))
return to.fullPath // 重新走一次导航，让新路由生效
}
return true
})注意：loadRoutes 失败（如令牌过期）时要清掉令牌并跳登录页，否则会在这里反复重试；404 通配路由在动态路由添加完之后再加。
同款作品
用这条提示词做出来的作品；原作者会因此获得积分
还没有同款，来做第一个。
0 条评论
还没有评论，来抢沙发～