全局前置守卫

Record growth...

已于 2023-01-29 16:28:45 修改

阅读量196

点赞数

分类专栏： Vue 文章标签：前端 vue.js javascript

于 2023-01-13 10:03:34 首次发布

本文链接：https://blog.csdn.net/weixin_44239550/article/details/128667380

版权

Vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

当访问某路由之前可以实现拦下来的效果。
下面的功能可以实现禁止进入“/about”路由，当想要进去的时候会跳转到主界面，其他的会正常。这里需要注意，一般加上这个else会更好，不然会报警告。


//全局前置守卫
router.beforeEach((to, from, next)=> {
  console.log("to: ", to);
  console.log("from: " , from)
  if(to.path == "/about"){
    next("/")
  }else{
    next()
  }
})

在这里插入图片描述
实际使用：

// 导航全局守卫
router.beforeEach((to, from, next) => {
  const userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
  // 登录或者注册界面 直接放行
  if (to.path == '/login' || to.path == '/sign') {
    next();
    return;
  }
  // 没登陆就去登录
  if ( userInfo == null) {
    alert('您还没有登录，请先登录');
    next('/login');
    return;
  }else{
    if (to.path.indexOf('/zhao/') != -1 && userInfo.type != 1) {
      // console.log(to.path)
      alert('对不起，您无权访问....');
      next(from.path)
      return;

    }
    if (to.path.indexOf('/tou/') != -1 && userInfo.type != 2) {
      console.log(userInfo)
      alert('对不起，您无权访问....');
      next(from.path)
      return;

    }
    if (to.path.includes('/manage/') && userInfo.type != 0) {
      // console.log('tou')
      alert('对不起，您无权访问....');
      next(from.path)
      return;

    } 
    next();
  }
  
})