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
上一篇: thinkphp3.2中替换入口文件
下一篇: Vue路由——路由嵌套和前置守卫
推荐阅读
-
vue路由守卫+登录态管理实例分析
-
vue router导航守卫(router.beforeEach())的使用详解
-
vue router导航守卫(router.beforeEach())的使用详解
-
vue-router 实现导航守卫(路由卫士)的实例代码
-
vue路由导航守卫和请求拦截以及基于node的token认证的方法
-
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
-
vue-router 实现导航守卫(路由卫士)的实例代码
-
vue2.0路由守卫函数代码实例解析
-
vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )
-
vue-router导航守卫(router.beforeEach())的使用