Vue 导航守卫在硬刷新时在 localStorage 之前运行

Question

所以我试图在用户访问路由之前检查他们的权限。我试过使用 route.beforeEach 和 route.beforeResolve。如果已加载选项卡中的 localStorage，它会完美运行，但如果我尝试访问新选项卡中的路由，它 returns 到 404，这意味着用户没有权限。工作流程是这样的：

当前：

浏览器新标签页
http:///url/route
returns 404
从按钮导航到 http:///url/route
成功导航至路线页面

预计：

浏览器新标签页
http:///url/route
如果用户有权限，成功导航到路由页面

代码如下：

router.beforeEach((to: any, from: any, next: any) => {
  let permission: any = localStorage.getItem(`${process.env.NODE_ENV}_user_role_permission`);
  permission = permission ? JSON.parse(permission) : [];
  console.log(permission);
  if (!(to.meta.permission === permission)) {
    next("/not-found");
    return;
  }
  next();
});

问题是，当我尝试在新选项卡上访问它时，console.log(permission) 将 return 为空，但是当我从那个 404 页面访问它时，我将能够导航。路由器是否可能在 localStorage 之前运行？

Answer 1

这个问题我的解决方法是调用我的api加载权限并保存到localStorage，流程是这样的：

检查用户是否已经登录
如果是，则调用api加载localstorage
如果没有，则重定向到登录页面

Vue 导航守卫在硬刷新时在 localStorage 之前运行

Vue navigation guard runs before localStorage on hard refresh

javascript

vue.js

vue-router

vuejs3