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 條評論
還沒有評論，來搶沙發～