欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

beforeEach前置路由守卫 vue

程序员文章站 2022-03-24 18:12:51
...

路由守卫:通过这个名词显而易见就类似于古代城池前士兵看守,你只有士兵认的通行证才能让你进入,如果不符合或者没有通行证那么你无法进入这个城池,这也是为了安全起见。

同样vue中的路由守卫也是一样的,一般用来拦截路由请求。

使用场景

  • 通常用在登录拦截,可以是全局也可以局部的。
  • 做后台管理系统,会根据不同的用户权限展示不同的内容。

主要思想

  •  登录成功的时候存一个状态,可以放在localStorage/sessionStorage/store任意一个都可以
  • 然后通过路由钩子判断一下,符合条件可以进入系统,不符合条件仍在登录页

需求说明

一个网站你没有登录,想要通过改变地址栏的方式直接进入,为了安全起见这是不可以的。这时候你就可以设置前置守卫route.beforeEach路由。

代码

login.vue

以下代码是登录接口:存的状态  sessionStorage.setItem("isLogin", true);

  let params = {
        mobile: Number(this.mobile),
        captcha: Number(this.captcha),
        type: 2,
      };
      loginApi.login(params).then((res) => {
        if (res.code == 1) {
          this.$toast("登录成功");
          sessionStorage.setItem("isLogin", true);
          // localStorage.setItem("token", res.token);
          this.$router.push({
            name: "invoiceList",
            query: {
              housecode: this.housecode,
              ownername: this.ownername,
            },
          });
        } else {
          this.$toast(res.message);
        }
      });
    },

局部页面:设置前置路由

export default {
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("isLogin") && to.query.housecode) {
      next();
    } else {
      next({ path: "/login", query: { Rurl: to.fullPath } });
    }
  }
  }

前置路由守卫详细介绍:

https://www.cnblogs.com/lhl66/p/9195787.html