首先咱们得揪出问题根源：页面刷新时Vuex的状态会被清空，所以一开始store.state.auth.user是null。你的原代码里虽然调用了await store.dispatch(AUTH_REFRESH)重新获取用户信息，但存在两个问题——一是没处理异步请求的错误情况，二是刷新页面时from是初始空路由，你临时方案里的if (to = from)不仅语法错误（应该用===），逻辑也不成立。

下面给你一个完善的直接在导航守卫内实现的方案：

router.beforeEach(async (to, from, next) => {
  // 复用滚动逻辑，避免重复代码
  const scrollToTop = () => window.scrollTo(0, 0);

  if (to.meta.requireAuth) {
    // 无用户信息时，先尝试刷新获取
    if (!store.state.auth.user) {
      try {
        // 等待用户信息刷新完成
        await store.dispatch(AUTH_REFRESH);
        // 刷新成功后，重新校验用户类型权限
        const currentUserTp = store.state.auth.user.userTp;
        if (to.meta.userTp === currentUserTp) {
          next();
          scrollToTop();
        } else {
          // 用户类型不匹配，跳转登录页
          next({ name: 'login' });
          scrollToTop();
        }
      } catch (err) {
        // 刷新失败（比如token过期），直接跳转登录
        next({ name: 'login' });
        scrollToTop();
      }
    } else {
      // 已有用户信息，直接校验权限
      if (to.meta.userTp === store.state.auth.user.userTp) {
        next();
        scrollToTop();
      } else {
        next({ name: 'login' });
        scrollToTop();
      }
    }
  } else {
    // 无需权限的路由直接放行
    next();
    scrollToTop();
  }
});

核心优化说明： #

• 异步逻辑容错：给AUTH_REFRESH加上try/catch，处理刷新失败的场景（比如token失效），避免导航卡住。
• 刷新后重新校验：在异步请求完成后，用新获取的用户信息重新校验当前路由的userTp，这样刷新前的页面就能正常放行，不会错误跳转到登录页。
• 逻辑复用：把滚动到顶部的操作抽成函数，减少重复代码。

另外你提到的临时方案漏洞（用户知道URL就能访问但无数据），其实是合理的——前端导航守卫只是体验层的拦截，真正的权限控制靠服务端校验，这是安全的。如果想进一步优化，可以把用户基础信息存在sessionStorage里，页面刷新时先从本地读取快速恢复状态，再异步发起刷新请求，但要注意不要存储敏感数据（比如明文token）。

内容的提问来源于stack exchange，提问作者Tim Titus