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

Question

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

当前：

1. 浏览器上的新标签
2. http://url/route
3. 返回 404
4. 从按钮导航到 http://url/route
5. 成功导航到路线页面

预期：

1. 浏览器上的新标签
2. http://url/route
3. 如果用户有权限，成功导航到路线页面

代码如下：

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) 将返回 null，但是当我从该 404 页面访问它时，我将能够导航。路由器有没有可能先于localStorage运行？

Answer 1

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

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