vue-element-admin 登錄邏輯 permission.js

permission主要負(fù)責(zé)全局路由守衛(wèi)和登錄判斷隅要，

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設(shè)置在這里
import { getToken } from '@/utils/auth' 
//get-page-title文件主要是網(wǎng)站的標(biāo)題跪楞，get-page-title通過依賴setting.js里的title變量修改網(wǎng)站標(biāo)題
//如果需要更改網(wǎng)站的標(biāo)題缀去，可以直接到setting.js修改title屬性
import getPageTitle from '@/utils/get-page-title'

//NProgress是封裝的進(jìn)度條，基本不用動(dòng)
NProgress.configure({ showSpinner: false }) 

//路由白名單列表甸祭，把路由添加到這個(gè)數(shù)組缕碎，不用登陸也可以訪問
const whiteList = ['/login'] 


router.beforeEach(async(to, from, next) => { 
  // 請求路由時(shí)進(jìn)度條開始
  NProgress.start()

  // 設(shè)置標(biāo)題
  document.title = getPageTitle(to.meta.title)

  // 這里的getToken()就是在上面導(dǎo)入的auth.js里的getToken()方法
  const hasToken = getToken()

//如果存在token，即存在已登陸的令牌
  if (hasToken) {
  //如果用戶存在令牌的情況請求登錄頁面淋叶，就讓用戶直接跳轉(zhuǎn)到首頁阎曹，避免存在重復(fù)登錄的情況
    if (to.path === '/login') {
      // 直接跳轉(zhuǎn)到首頁伪阶，當(dāng)然取決于你的路由重定向到哪里
      next({ path: '/' })
      //一定要關(guān)閉進(jìn)度條
      NProgress.done()
    } else {
      //如果已經(jīng)有令牌的用戶請求的不是登錄頁煞檩，是其他頁面
      //就從Vuex里拿到用戶的信息，這里也證明用戶不是第一次登錄了
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
      //信息拿到后栅贴，用戶請求哪就跳轉(zhuǎn)哪
        next()
      } else {
        try {
          // 如果有令牌斟湃，但是沒有用戶信息，證明用戶是第一次登錄檐薯，通過Vuex設(shè)置用戶信息
          await store.dispatch('user/getInfo')
        //設(shè)置好了之后凝赛，依然可以請求哪就跳轉(zhuǎn)哪
          next()
        } catch (error) {
          // 如果出錯(cuò)了，把令牌去掉坛缕，并讓用戶重新去到登錄頁面
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          //關(guān)閉進(jìn)度條
          NProgress.done()
        }
      }
    }
  } else {
    //這里是沒有令牌的情況
    //還記得上面的白名單嗎墓猎，現(xiàn)在起作用了
    //whiteList.indexOf(to.path) !== -1)判斷用戶請求的路由是否在白名單里
    if (whiteList.indexOf(to.path) !== -1) {
      // 不是-1就證明存在白名單里，不管你有沒有令牌赚楚，都直接去到白名單路由對(duì)應(yīng)的頁面
      next()
    } else {
      // 如果這個(gè)頁面不在白名單里毙沾，直接跳轉(zhuǎn)到登錄頁面
      next(`/login?redirect=${to.path}`)
      //關(guān)閉進(jìn)度條
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  //每次請求結(jié)束后都需要關(guān)閉進(jìn)度條
  NProgress.done()
})