在作後臺管理系統的過程當中,遇到一個問題,404 頁面會不合時宜地出現:前端
用戶直接輸入 url 訪問,出現 404 頁面
數組
這是一個比較糟糕的狀況,用戶點開一個連接,進去就是 404 ,用戶體驗很很差。所以對這個問題進行了分析解決。瀏覽器
其中的關鍵點是,這是一個後臺管理系統,路由是前端根據當前用戶角色動態生成的,須要控制使其不能訪問其沒有權限訪問的頁面
404 是當用戶訪問路由表裏沒有設置的路徑時出現的頁面,因此,在路由導航鉤子函數裏判斷目的路徑進行重定向便可cookie
一、針對用戶打開新的瀏覽器窗口輸入的狀況(即未登陸),跳轉至登陸頁async
這裏根據當前是否保存有動態計算的路由數組進行判斷,也能夠根據有無 token 判斷函數
router.beforeEach(async (to, from, next) => { if (from.path === '/' && !util.cookies.get('savedRouteList')) { next({ name: 'login', query: { redirect: to.fullPath } }) } }
二、針對用戶已登陸系統,瀏覽器新開 Tab 標籤輸入 url 的狀況this
這裏根據目標路由是否存在於路由表中進行判斷,即只需判斷目的路由是否 404 頁面,已存在的路由會直接訪問,無需操做url
router.beforeEach(async (to, from, next) => { // 這裏不用 from.path 進行判斷 // 由於瀏覽器先訪問目標頁面,若是其不存在,再轉到 404 頁面,則 from.path 變成了目標頁面的路徑 if (from.name === null && to.name === 'notFound') { this.$message.warning('您沒有權限訪問當前頁面,已爲您重定向至首頁') const firstAccessedRoute = store.state.d2admin.user.accessedRouters[0].children[0].name // 訪問當前權限路由中第一個路由,若是爲空則回到登陸頁 next ({ name: firstAccessedRoute || 'login' }) } }
router.beforeEach(async (to, from, next) => { if (from.path === '/' && !util.cookies.get('savedRouteList')) { next ({ name: 'login', query: { redirect: to.fullPath } }) } if (from.name === null && to.name === 'notFound') { this.$message.warning('您沒有權限訪問當前頁面,已爲您重定向至首頁') const firstAccessedRoute = store.state.d2admin.user.accessedRouters[0].children[0].name next ({ name: firstAccessedRoute || 'login' }) } }