vue Element Admin 登录、验证流程

Z时代
2024-01-10
分类：综合

vue

一、程序执行流程

二、和其他采用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()
})