vue Element Admin 登錄、驗證流程

一、程序執行流程

 

 

 

 

二、和其他采用VUE框架的項目一樣，vue Element Admin 的程序入口是main.js，在這里new了一個VUE實例，同時導入引用了

permission和router

router：路由表

permission：權限控制

到這里程序的執行為main.js(new VUE)--->permission------>路由表,這是因為permission中定義了一個路由鈎子函數beforeEach：路由開始前執行，驗證用戶登錄

beforeEach分析

 

import router from './router'

import store from './store'

import { Message } from 'element-ui'

import NProgress from 'nprogress' // progress bar:進度條

import 'nprogress/nprogress.css' // progress bar style:進度條樣式

import { getToken } from '@/utils/auth' // get token from cookie:從cookie獲取令牌

import getPageTitle from '@/utils/get-page-title'

 

NProgress.configure({ showSpinner: false }) // NProgress Configuration:NPROGRESS配置

 

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist:白名單中重定向

 

router.beforeEach(async(to, from, next) => {

// start progress bar:開始進度條

NProgress.start()

 

// set page title:設置頁面標題

document.title = getPageTitle(to.meta.title)

 

// determine whether the user has logged in:確定用戶是否已登錄

const hasToken = getToken()

 

 

在上面的代碼中定義令牌常量時調用了getToken()函數去讀取存放在Cookies中的Token

 

if (hasToken) {//這里判斷Cookies中獲取的Token
//判斷當前瀏覽路徑（路由表中）是否有login
if (to.path === '/login') {
// if is logged in, redirect to the home page:如果已登錄，則重定向到主頁
next({ path: '/' })//重定向到根目錄即：

 

 Auth.js：Token存取控制，首次登陸時Token為空，登陸時如驗證成功會將Token保存到Cookies中，

路由表截圖

 

 

 

NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
} else {
// determine whether the user has obtained his permission roles through getInfo:確定用戶是否通過getInfo獲取了權限角色
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']:注意：角色必須是對象數組！例如：['admin']或，['developer'，'editor']
通過await調用user文件中的getinfo函數獲取角色值;這是一個用同步的思維來解決異步問題的方案，當前端接口調用需要等到接口返回值以后渲染頁面時。
const { roles } = await store.dispatch('user/getInfo')

 

getInfo獲取數據流程：

定義數據修改方法集

 

 

 

在getInfo中用commit方法調用數據修改方法，修改靜態變量值返回到data中

 

 

 

 

// generate accessible routes map based on roles:基於角色生成可訪問路由圖
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

// dynamically add accessible routes:動態添加可訪問路由
router.addRoutes(accessRoutes)

// hack method to ensure that addRoutes is complete:確保addRoutes完整的hack方法
// set the replace: true, so the navigation will not leave a history record:設置replace:true，這樣導航就不會留下歷史記錄
next({ ...to, replace: true })
} catch (error) {
// remove token and go to login page to re-login:刪除令牌並轉到登錄頁面重新登錄
await store.dispatch('user/resetToken')
移除


Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token:沒有令牌*/

if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly:在免費登錄白名單中，直接進入
next()
} else {
// other pages that do not have permission to access are redirected to the login page.:其他沒有訪問權限的頁面將被重定向到登錄頁面。
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})

router.afterEach(() => {
// finish progress bar:完成進度條
NProgress.done()
})

 

 三、數據發送、獲取，及假數據

1、第一次打開頁面執行鈎子時，全局變量中值為空，獲取token令牌失敗路由跳轉到登錄頁面“/login”

2、在登錄頁面中設定了驗證規則（放在utils/validate.js中） 限定了用戶名只能是 'admin'或 'editor'，密碼不小於

位

3、輸入用戶名和密碼后點擊登錄按鈕，在點擊事件中調用store/user.js中的函數login

4、store/user.js中通過導入引用將login委托到了，api/user.js中的login函數，在login調用時將用戶名和密碼作為參數傳入，而api/user.js中的login函數將在axios（ajax請求發送插件）

對象實例化時，作為參數指定給axios的攔截器(axios.interceptors.request),這樣就可以將數據請求通過API接口發送給后台服務器了，在了里實例化axios時將服務器設定給了一個變量

變量值執行了mock（假數據發送插件，真正使用時改為數據服務器的uli即可）

5、在mock定義了與請求函數相對應的函數指定給axios的攔截器響應，這樣當前端發送一個API請求時，就能獲得一個設定好的假數據

6、登錄成功后調用commit（'SET_TOKEN',data）函數，將返回的假數據（包括了token和用戶權限信息）寫入到靜態變量中。

7、再次打開頁面時，token令牌驗證成功，根據用戶是'admin'還是 'editor'，生成不同的路由表，之后將按照路由表對項目進行訪問