Vue后台的路由和權限校驗

路由和權限校驗

Vue的中后台系統中會有對路由和權限進行配置，學習一波 vue-admin-element 中路由配置 。

git地址 : https://github.com/PanJiaChen/vue-element-admin

路由的處理邏輯分析

 

 

中后台路由場景分析

輸入一串地址 -> /xxx

• Cookie 中未存 Token 時：
  • 訪問為 /login 時，直接訪問 /login
  • 訪問為 /login 以外的路由：如 /dashboard  實際訪問路徑為 /login?redirect=%2Fdashboard ，登錄后直接重定向到 /dashboard
• Cookie 中獲取到 Token 時：
• 訪問為 /login 時， login 在白名單中，重定向到 /  -> /dashboard
• 訪問為 /login?redirect=/xxx 時，重定向到 /xxx
• 訪問為 /xxx 時，直接訪問為 /xxx

路由邏輯源碼

第一步：在main.js 中加載了全局路由守衛

import './permission' // 全局路由守衛

第二步：permission.js 中定義了全局路由守衛

router.beforeEach(async(to, from, next) => {
  // 啟動進度條
  NProgress.start()

  // 修改頁面標題
  document.title = getPageTitle(to.meta.title)

  // 從 Cookie 獲取 Token
  const hasToken = getToken()

  // 判斷 Token 是否存在
  if (hasToken) {
    if (to.path === '/login') {
      // 如果當前路徑為 login 就重定向到首頁
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // 判斷用戶的角色是否存在
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      // 如果用戶的角色存在，則直接訪問
      if (hasRoles) {
        next()
      } else {
        // 如果用戶的角色不存在
        try {
          // get user info
          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
          // 異步獲取用戶的角色
          const { roles } = await store.dispatch('user/getInfo')

          // generate accessible routes map based on roles
          // 根據傳入的用戶角色信息，動態生成路由
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

          // dynamically add accessible routes
          // 調用 router.addRoutes 動態添加路由
          router.addRoutes(accessRoutes)

          // 使用 replace 訪問路由，不會在 history 中留下記錄
          next({ ...to, replace: true })
        } catch (error) {
          // 當獲取用戶 角色 和 獲取路由 過程中產生異常時進行 catch 異常處理
          // remove token and go to login page to re-login
          // 移除 Token 數據
          await store.dispatch('user/resetToken')
          // 顯示提示錯誤
          Message.error(error || 'Has Error')
          // 重定向到 login 頁面
          next(`/login?redirect=${to.path}`)
          // 停止進度條
          NProgress.done()
        }
      }
    }
  } else {
    /* 不存在 token*/
    // 判斷訪問的 URL 是否在白名單中
    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // 如果訪問的 URL 不在白名單中，則直接重定向到登錄頁面，並將訪問的 URL 添加到 redirect 參數中
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

 

Tip：吃水不忘打井人 - >  [小慕讀書] 管理后台