Azure AD：React应用无令牌缓存时登录维持与错误处理问询

一、是否存在无需令牌缓存实现静默刷新令牌的方法？ #

不存在。Azure AD的静默令牌刷新机制完全依赖缓存中的Refresh Token：acquireTokenSilent 方法会先检查缓存内的Access Token是否有效，若已过期则用缓存的Refresh Token申请新的Access Token/ID Token。如果清除所有令牌缓存，就没有可用的Refresh Token来静默获取新令牌，只能通过弹窗、跳转登录这类交互式方式重新获取，必然会中断用户操作，无法实现原有的无中断体验。

二、如何检测令牌过期并主动登出用户，避免网络错误提示？ #

你的代码存在一个关键问题：获取令牌后执行的sessionStorage.clear()会清空MSAL存储的令牌缓存，导致令牌过期后acquireTokenSilent无法获取Refresh Token进行刷新，进而抛出错误。以下是具体修复方案：

1. 避免误删MSAL的令牌缓存 #

不要直接清空整个sessionStorage，如果需要清理应用自身的缓存，仅删除自定义的存储键即可：

// 只清除应用专属缓存项，保留MSAL的令牌缓存
sessionStorage.removeItem('your-app-specific-key');

2. 捕获令牌过期错误并主动登出 #

在acquireTokenSilent的异常捕获块中，判断错误类型，当出现需要用户交互的认证错误（即令牌过期且无有效Refresh Token）时，主动调用登出方法：

修改后的代码示例：

import { InteractionRequiredAuthError } from '@azure/msal-browser';

const App: FC = () => {
  const { instance, accounts } = useMsal();
  const [account, setAccount] = useState<AccountInfo | null>(accounts?.[0] || null);
  const [accessToken, setAccessToken] = useState<string | null>(null);
  const [msalAccessToken, setMsalAccessToken] = useState<string | null>(null);

  const requestProfileData = async () => {
    try {
      const response = await instance.acquireTokenSilent({
        scopes: ['User.Read'],
        account: accounts[0]
      });
      setAccount(response.account);
      setAccessToken(response.idToken);
      setMsalAccessToken(response.accessToken);
      // 仅清理应用自身缓存，不触碰MSAL的令牌存储
      // sessionStorage.removeItem('your-app-custom-key');
    } catch (err) {
      // 判断是否为需要用户交互的认证错误（令牌过期/无有效Refresh Token）
      if (err instanceof InteractionRequiredAuthError) {
        // 主动登出用户，可指定登出后跳转地址
        instance.logoutRedirect({
          postLogoutRedirectUri: window.location.origin
        });
      } else {
        console.error('令牌获取失败:', err.message);
      }
    }
  };

  useEffect(() => {
    if (accounts.length) {
      requestProfileData();
    }
  }, [accounts]); // 依赖accounts，账户变化时重新触发
}

3. 额外优化：主动监控令牌过期时间 #

你也可以解析令牌的exp字段，提前监控过期时间，在令牌即将过期时主动触发登出：

// 解析JWT令牌，获取过期时间（毫秒级）
const parseTokenExpiry = (token: string): number => {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload.exp * 1000;
};

// 设置定时器，提前5分钟触发登出
const setupExpiryTimer = (token: string) => {
  const expiryTime = parseTokenExpiry(token);
  const timeUntilExpiry = expiryTime - Date.now() - 5 * 60 * 1000;
  if (timeUntilExpiry > 0) {
    setTimeout(() => {
      instance.logoutRedirect();
    }, timeUntilExpiry);
  }
};

// 在获取令牌后调用该方法
setMsalAccessToken(response.accessToken);
setupExpiryTimer(response.accessToken);

内容的提问来源于stack exchange，提问作者A.T.