MSAL令牌过期后invalid_grant错误无法捕获求助

问题分析 #

你遇到的invalid_grant错误无法被现有代码捕获，核心原因有两点：

• MSAL中部分invalid_grant场景会被包装为InteractionRequiredAuthError，导致你设置的isServerError && isInvalidGrantError && !isInteractionRequiredError条件永远无法触发
• acquireTokenRedirect是跳转式授权，执行后页面会直接刷新，不会返回响应结果，后续的token设置代码根本不会执行

修改后的代码 #

const refreshToken = async () => {
    const request = {
      account: account,
      scopes: ["https://graph.microsoft.com/User.Read"],
    };
    try {
      const response = await instance.acquireTokenSilent(request);
      localStorage.setItem("accessToken", response.accessToken);
      setToken(response.accessToken);
    } catch (e) {
      console.log(e);
      // 优先检查错误码，覆盖所有invalid_grant场景
      const isInvalidGrant = e.errorCode === "invalid_grant";
      const isInteractionRequired = e instanceof InteractionRequiredAuthError;

      if (isInvalidGrant) {
        // 令牌过期/无效，清理缓存并强制重新登录
        localStorage.clear();
        await instance.loginRedirect(request);
        return;
      }

      if (isInteractionRequired) {
        try {
          // acquireTokenRedirect执行后页面会刷新，无需等待返回结果
          await instance.acquireTokenRedirect(request);
        } catch (interactionError) {
          console.log("交互授权错误:", interactionError);
          handleError(interactionError);
        }
      } else {
        // 兜底处理其他类型错误
        handleError(e);
      }
    }
  };

关键优化说明 #

1. 优先判断错误码：跳过实例类型判断，直接检查errorCode === "invalid_grant"，确保所有令牌过期/无效的场景都能被捕获
2. 调整跳转逻辑：令牌无效时直接调用loginRedirect，强制用户重新完成授权流程，避免acquireTokenRedirect的无返回问题
3. 修正跳转后的结果处理：acquireTokenRedirect执行后页面会刷新，所以不要在它后面写token设置代码，需在应用初始化阶段添加以下逻辑处理跳转结果：

// 应用入口处添加
instance.handleRedirectPromise().then(response => {
  if (response) {
    localStorage.setItem("accessToken", response.accessToken);
    setToken(response.accessToken);
  }
}).catch(err => {
  console.log("跳转授权处理错误:", err);
});

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