- vue-element-admin中，permission主要負責全局路由守衛和登錄判斷，希望通過以下注釋說明，幫助大家理解這個文件的邏輯
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//auth文件主要依賴js-cookie模塊，把getToken，setToken，removeToken設置在這里
import { getToken } from '@/utils/auth'
//get-page-title文件主要是網站的標題，get-page-title通過依賴setting.js里的title變量修改網站標題
//如果需要更改網站的標題，可以直接到setting.js修改title屬性
import getPageTitle from '@/utils/get-page-title'
//NProgress是封裝的進度條，基本不用動
NProgress.configure({ showSpinner: false })
//路由白名單列表，把路由添加到這個數組，不用登陸也可以訪問
const whiteList = ['/login']
router.beforeEach(async(to, from, next) => {
// 請求路由時進度條開始
NProgress.start()
// 設置標題
document.title = getPageTitle(to.meta.title)
// 這里的getToken()就是在上面導入的auth.js里的getToken()方法
const hasToken = getToken()
//如果存在token，即存在已登陸的令牌
if (hasToken) {
//如果用戶存在令牌的情況請求登錄頁面，就讓用戶直接跳轉到首頁，避免存在重復登錄的情況
if (to.path === '/login') {
// 直接跳轉到首頁，當然取決於你的路由重定向到哪里
next({ path: '/' })
//一定要關閉進度條
NProgress.done()
} else {
//如果已經有令牌的用戶請求的不是登錄頁，是其他頁面
//就從Vuex里拿到用戶的信息，這里也證明用戶不是第一次登錄了
const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
//信息拿到后，用戶請求哪就跳轉哪
next()
} else {
try {
// 如果有令牌，但是沒有用戶信息，證明用戶是第一次登錄，通過Vuex設置用戶信息
await store.dispatch('user/getInfo')
//設置好了之后，依然可以請求哪就跳轉哪
next()
} catch (error) {
// 如果出錯了，把令牌去掉，並讓用戶重新去到登錄頁面
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
//關閉進度條
NProgress.done()
}
}
}
} else {
//這里是沒有令牌的情況
//還記得上面的白名單嗎，現在起作用了
//whiteList.indexOf(to.path) !== -1)判斷用戶請求的路由是否在白名單里
if (whiteList.indexOf(to.path) !== -1) {
// 不是-1就證明存在白名單里，不管你有沒有令牌，都直接去到白名單路由對應的頁面
next()
} else {
// 如果這個頁面不在白名單里，直接跳轉到登錄頁面
next(`/login?redirect=${to.path}`)
//關閉進度條
NProgress.done()
}
}
})
router.afterEach(() => {
//每次請求結束后都需要關閉進度條
NProgress.done()
})