欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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路由守卫验证

Vue路由守卫验证
参考文章
vue路由守卫+登录态管理