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‘

 

vue 路由守卫

上一篇:[javaSE] 看知乎学习反射


下一篇:openssl 升级操作 -2