解析vue-element-admin中负责拦截的permission.js
很⾼级的样⼦可是很多都看不懂。。。。今天发现，看不懂的地⽅只要把源码中的英⽂翻译过来基本就可以了哈哈哈哈哈哈哈哈哈哈哈回想当初求职时还说过⾃⼰“有⼀定的英⽂⽂档阅读能⼒”真是笑死
下⾯直接上代码！！
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // 进度条组件
import 'nprogress/nprogress.css' // 进度条样式
import { getToken } from '@/utils/auth' // 从cookie中获取token
import getPageTitle from '@/utils/get-page-title'
const whiteList = ['/login', '/auth-redirect'] // 免登录的⽩名单
// ⽩名单通常装着登录页或扫码下载页
router.beforeEach(async(to, from, next) => {
// 进度条开始滑动
NProgress.start()
// 设置页⾯标题
document.title = a.title)
// 查看有没有token储存在cookie中
const hasToken = getToken()
if (hasToken) {  // 有token
if (to.path === '/login') {  // 如果即将要进⼊的是login page
/
/ 如果即将要去登录页，则重定向到⾸页
// 这种情况⼀般不是应⽤于退出登录，⼤多因为有⼈在路径中⼿动输⼊/login来进⾏路由跳转
// 所以，直接回到⾸页
next({ path: '/' })
NProgress.done() // 进度条滑动结束
} else {
// determine whether the user has obtained his permission roles through getInfo（原注释）
// 查看该⽤户是否获得许可该⾓⾊可以进⼊那页⾯（注释翻译）
// 个⼈理解：去仓库中查看有没有存储个⼈信息
vue element adminconst hasRoles = les && les.length > 0
if (hasRoles) {
next()
} else {  //  没有许可
// try catch⽤于测试代码中的错误。
// try中放要运⾏的代码块，catch中放失败后将运⾏的代码块
try {
// 获得⽤户信息
// tips:⾓⾊必须是⼀个对象数组。例如：['admin'] or ,['developer','editor']
const { roles } = await store.dispatch('user/getInfo')
// 基于⾓⾊，⽣成可访问的路径集合
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 动态添加可访问的路由
router.addRoutes(accessRoutes)
// hack ⽅法为了确保添加的路由是可以完成的？？（这句纯催翻译。。完全不懂哈哈哈哈哈
// set the replace: true, so the navigation will not leave a history record
// 设置替代的为true，这样，导航就不会超出历史记录，随便乱跑了？哈哈哈哈哈哈
next({ ...to, replace: true })
} catch (error) {
// 删除token，并且去登录页再次登录
await store.dispatch('user/resetToken')
<(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。