beforeEach前置路由守卫 vue

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

同样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