beforeRouteEnter(to, from, next):进入路由之前执行的函数,写在main.vue里实现登陆拦截。

1、首先在登录接口请求成功后,将后台返回的用户名存到sessionStorage里
2、在main.vue里使用钩子函数beforeRouteEnter(to, from, next)

beforeRouteEnter(to, from, next) {    
      if(sessionStorage.getItem("username")) {     //如果sessionstorage里存了用户名,则表示已登录
        next(true);
      }else {
        next(vm => {    // 通过 `vm` 访问组件实例 ,直接用this是有指向问题的   
          vm.$router.push('/');
          vm.$message({       //这里是elementUI的message提示,按自己需求来写就行
            message: '请先登录!',
            type: 'warning'
          });
        })

      }
    },
Logo

前往低代码交流专区

更多推荐