beforeEach前置路由守卫 vue

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

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

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

使用场景：

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

主要思想：

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

需求说明：

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

代码：

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

局部页面：设置前置路由

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][https_www.cnblogs.com_lhl66_p_9195787.html]

[https_www.cnblogs.com_lhl66_p_9195787.html]: https://www.cnblogs.com/lhl66/p/9195787.html