解析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'

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()
})