Vue路由守卫验证
程序员文章站
2022-06-11 21:47:34
...
最近在做一个大屏可视乎的项目,需要根据登陆用户的信息,进行显示一些列的数据。
正常访问的话,你只要记住url,你就可以访问任何一个页面,一些重要的数据页面需要登陆才可以查看,不做路由守卫的话,可以查看。 没有一点安全性
。现在要做的是必须登陆才可以查看需要登陆信息的相关页面,就要用到 Vue 路由守卫 来干了
代码走你
配置路由权限验证
在
router
中,配置你要验证的路由,requireAuth 为 true 开启验证
export const HomeRouter = {
path: "/home",
name: "home",
// 在meta中 设置 requireAuth 为 true 开启验证
meta: {
requireAuth: true
},
component: () => import("@/views/Home/Home.vue")
};
在main.js
文件下使用全局路由守卫
router.beforeEach((to, from, next) => {
//to ------- 目标路由对象
//from ------ 即将要离开的路由对象
//next ------ 执行下个路由钩子函数
//判断目标路由对象是否需要验证
if (to.meta.requireAuth) {
// 这块根据自己需求判断
// 可以从Vuex , localStorage 来获取判断状态
if (localStorage.getItem("checkID")) {
// 验证成功,进入下一个路由
next();
} else {
// 验证失败,这块可以根据你的业务需求定义
// 跳转到 登陆页面
next({
path: "/"
});
}
// 不需要验证则进入下一个路由
} else {
next();
}
});
参考文章
vue路由守卫+登录态管理