解決不合時宜的路由 404 狀況

在作後臺管理系統的過程當中,遇到一個問題,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'
      })
    }
}
相關文章
相關標籤/搜索