解析vue-element-admin中负责拦截的permiss

很高级的样子可是很多都看不懂。。。。今天发现，看不懂的地方只要把源码中的英文翻译过来基本就可以了哈哈哈哈哈哈哈哈哈哈哈回想当初求职时还说过自己“有一定的英文文档阅读能力”真是笑死
下面直接上代码！！

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'

NProgress.configure({ showSpinner: false }) // 配置进度条

const whiteList = ['/login', '/auth-redirect'] // 免登录的白名单
// 白名单通常装着 登录页 或 扫码下载页

router.beforeEach(async(to, from, next) => {
  // 进度条开始滑动
  NProgress.start()

  // 设置页面标题
  document.title = getPageTitle(to.meta.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（原注释）
      // 查看该用户是否获得许可该角色可以进入那页面（注释翻译）
      // 个人理解：去仓库中查看有没有存储个人信息
      const hasRoles = store.getters.roles && store.getters.roles.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')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {  // 没有token

    if (whiteList.indexOf(to.path) !== -1) {  // 在白名单里找到了要去的路径
      // in the free login whitelist, go directly
      next()    //直接去~~
    } else {
      //  其它不在白名单内被许可的页面们，重定向到登录页
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})

tada~~~_解析完毕~

会不会写不知道，但能看懂了哈哈哈哈哈哈哈哈哈哈哈哈下次见