美文网首页
全局路由守卫进行跳转拦截

全局路由守卫进行跳转拦截

作者: 冰点雨 | 来源:发表于2022-06-24 15:52 被阅读0次

在router文件夹下index.js下进行拦截

//全局守卫:前置守卫(在路由跳转之前进行判断)
router.beforeEach(async (to, from, next) => {
  //to:获取到要跳转到的路由信息
  //from:获取到从哪个路由跳转过来来的信息
  //next: next() 放行  next(path) 放行
  let token = store.state.use.token;
  let name = store.state.use.userInfo.name;
  //  登录
  if (token) {
    //已经登录而且还想去登录------不行
    if(to.path=="/login"||to.path=='/register'){
      next('/');
    }else{
      //已经登陆了,访问的是非登录与注册
      //登录了且拥有用户信息放行
      if (name) {
          next();
       } else {
        //登陆了且没有用户信息
         //在路由跳转之前获取用户信息且放行
         try {
          await store.dispatch("getUserInfo");
          next();
         } catch (error) {
          //token失效从新登录
          await store.dispatch('userLogout');
          next('/login')
         }
       }
    }
  }else{
    //未登录:不能去交易相关、不能去支付相关【pay|paysuccess】、不能去个人中心
      //未登录去上面这些路由-----登录
      let toPath = to.path;
      if(toPath.indexOf('/trade')!=-1 || toPath.indexOf('/pay')!=-1||toPath.indexOf('/center')!=-1){
        //把未登录的时候向去而没有去成的信息,存储于地址栏中【路由】
        next('/login?redirect='+toPath);
      }else{
         //去的不是上面这些路由(home|search|shopCart)---放行
         next();
      }
  }
});

特别注意:未登录状态,跳转需要登录的页面时,把未登录的时候向去而没有去成的信息,存储于地址栏中【路由】。登录成功再把相关参数传过去

把信息存储在地址栏中

 let toPath = to.path;
      if(toPath.indexOf('/pay')!=-1){
        //把未登录的时候向去而没有去成的信息,存储于地址栏中【路由】
        next('/login?redirect='+toPath);
      }

登录后跳转指定路由,并传递参数

 //登录的路由组件:看路由当中是否包含query参数,有:调到query参数指定路由,没有:调到home
                let toPath = this.$route.query.redirect || "/home";
                this.$router.push(toPath);

相关文章

  • 全局路由守卫进行跳转拦截

    在router文件夹下index.js下进行拦截 特别注意:未登录状态,跳转需要登录的页面时,把未登录的时候向去而...

  • vue-路由导航守卫&异步组件

    导航守卫包括全局导航守卫、路由守卫、组件局部守卫 全局导航守卫 在全局导航守卫中,每次路由的跳转他们三个都会被触发...

  • 导航守卫(路由拦截)

    导航守卫就是在路由进行跳转的时候进行拦截,中止路由的跳转,进行相应的操作 在组件化开发中,由于router挂载在了...

  • vue 路由导航白话全解析

    这里先放上官网的教程和说明:点击这里,vue导航守卫官方文档 路由守卫 路由守卫说白了就是路由拦截,在地址栏跳转之...

  • vue学习(52)vue-router(4)

    路由守卫作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫全局守卫(我们可以在meta中配置一些信息) ...

  • vue的路由守卫

    路由守卫分3种:全局守卫路由独享守卫组件内的路由守卫 1.全局守卫:beforeEachbeforeResolve...

  • 路由守卫(全局守卫、独享守卫、组件内守卫)

    1.作用:对路由器进行权限控制2.分类:全局守卫、独享守卫、组件内守卫 全局守卫 独享守卫 组件内守卫

  • vue路由钩子介绍

    路由钩子主要用来拦截导航,在钩子里可以跳转到指定的页面或取消跳转。 路由参数或者查询的改变不会触发导航守卫!。 *...

  • vue全局路由守卫

    1.拦截住所有的跳转,执行回调函数 三种方式设置路由守卫

  • Vue实战第7天

    登录登出&& token login页面登录跳转到home页面,使用路由守卫拦截 通过user模块的action发...

网友评论

      本文标题:全局路由守卫进行跳转拦截

      本文链接:https://www.haomeiwen.com/subject/lctbvrtx.html