Vue路由守卫-页面登录权限设置

直接上代码：
首先在你的登录页面需要存储一个localStorage数据，

登录成功
localStorage.setItem("islogin", JSON.stringify(this.formInline));

然后在vue的全局js中找到main.js文件添加路由守卫

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (JSON.parse(localStorage.getItem("islogin"))) {
      next();
    } else {
      next({
        path: "/SignIn"//指向为你的登录界面
      });
    }
  } else {
    next();
  }

  if (to.fullPath === "/SignIn") {
    if (JSON.parse(localStorage.getItem("islogin"))) {
      next({
        path: from.fullPath
      });
    } else {
      next();
    }
  }
});

最后一步，在router文件找到你全局路由设置在每一个界面里面加入路由守卫

 {
      name: "Portal",
      path: "/Portal",
      // 路由守卫
      meta: { requireAuth: true },
      props: true,
      component: () => import("@/components/modules/Portal")
    },

meta: { requireAuth: true },将开启你的页面路由守卫