Vue路由守卫验证

最近在做一个大屏可视乎的项目，需要根据登陆用户的信息，进行显示一些列的数据。
正常访问的话，你只要记住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路由守卫+登录态管理