beforeEach前置路由守卫 vue-蒲公英云

beforeEach前置路由守卫 vue

r囧r小猫 2022-12-03 09:53 203阅读 0赞

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

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

使用场景：

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

主要思想：

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

需求说明：

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

代码：

以下代码是登录接口：存的状态 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 } });
    }
  }
  }