配置动态路由(导航守卫)|白名单

配合自动更新页面标签title方法

自动更新页面标签title - 掘金 (juejin.cn)

在src文件夹下创建permission.js文件

在main.js文件内引入并立即使用

import '@/permission'

permission.js文件内部

import router from './router'
import store from './store'
// 弹框组件
import { Message } from 'element-ui'
// 自动更新页面标签title方法,在utils中
import getPageTitle from '@/utils/get-page-title'
// 进度条，在axios中配置了这里可以不用配置
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
// 禁用进度环
NProgress.configure({ showSpinner: false }) // NProgress Configuration

// 白名单:不需要登录校验的路由
const whiteList = ['/login', '/404'] // no redirect whitelist
// 导航守卫
router.beforeEach(async (to, from, next) => {
  // 开启进度条
  NProgress.start()

  // 自动更新页面标签title，title名使用前往的路由配置中meta里的title属性
  document.title = getPageTitle(to.meta.title)

  // 从仓库中获取token 用于判断有无token
  const hasToken = store.dispatch('user/getToken')
  // 有token
  if (hasToken) {
    //如果登录了后还想访问登录页
    if (to.path === '/login') {
      // 那就前往首页
      next({ path: '/' })
      // 结束进度条
      NProgress.done()
    }
    //如果登录了后访问其他页
    else {
      //从仓库中获取用户信息
      const hasGetUserInfo = store.getters.name
      // 如果有用户信息
      if (hasGetUserInfo) {
        // 正常跳转
        next()
      }
      // 如果没有用户信息
      else {
        // 获取用户信息成功
        try {
          // 调仓库中接口获取用户信息
          await store.dispatch('user/getInfo')
          // 跳转
          // next()
          next({ ...to })
        }
        // 获取用户信息失败(token过期)
        catch (error) {
          // 调仓库中接口清除token
          await store.dispatch('user/resetToken')
          // 弹出提示框提示
          Message.error(error || 'Has Error')
          // 跳到login页
          next(`/login?redirect=${to.path}`)
          // 进度条取消
          NProgress.done()
        }
      }
    }
  }
  // 没token
  else {
    // 判断访问的路径是否在白名单中，如果在
    if (whiteList.indexOf(to.path) !== -1) {
      // 跳转对应页面
      next()
    }
    // 如果不在
    else {
      // 跳转到登录页，或者可以跳转到403页告知没有权限
      next(`/login?redirect=${to.path}`)
      // 结束进度条
      NProgress.done()
    }
  }
})