首页 > 其他 > 详细

vue 路由守卫

时间:2021-07-30 15:59:04      阅读:17      评论:0      收藏:0      [点我收藏+]

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 路由守卫

原文:https://www.cnblogs.com/wxj130/p/15078928.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!