vue 路由守卫

1、新建permission.js文件，和mian.js同级，将代码复制到新建的js文件，通过判断token来控制页面是否跳转（token封装看我上一条博客）

import router from './router'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth'

const whiteList = '/'  // 登录页路由地址
const pass = '/findpassword' // 忘记密码路由地址

router.beforeEach((to, from, next) => {
  const token = getToken()
  // 如果未匹配到路由
  if (to.matched.length === 0) {
    Message.error('无效路由！')
    next()
  } else {
    if (token !== '' && token !== null && token !== 'undefined' && token !== undefined) {
      next()
      // next 对路由进行导航
    } else {
      // 如果是登录页或其他不需要token的页面，下一步
      if (to.path === whiteList || to.path === pass) {
        next()
      } else {
        next(whiteList)
      }
    }
  }
})

router.afterEach(() => {
})

2、main.js 引入

// 路由守卫
import './permission'