如何在MSAL React应用中页面刷新后保留IdToken

核心原因 #

MSAL的getAllAccounts()返回的Account对象不会持久化存储IdToken，仅在首次登录后的内存缓存中存在，页面刷新后内存缓存清空，就会出现IdToken丢失的情况。控制台的CacheManager:getIdToken - No token found日志也说明本地缓存中没有对应的IdToken记录。

解决方案 #

1. 显式获取并缓存IdToken到本地存储 #

不要依赖Account对象中的IdToken，而是通过acquireTokenSilent方法主动获取IdToken，并存入localStorage或sessionStorage：

const [userDetails, setUserDetails] = useState(null);
const [idToken, setIdToken] = useState(localStorage.getItem('msalIdToken'));

useEffect(() => {
  instance.handleRedirectPromise()
    .then(async () => {
      const currentUser = instance.getAllAccounts()[0];
      if (currentUser) {
        setUserDetails(currentUser);
        
        // 静默获取IdToken
        try {
          const tokenResponse = await instance.acquireTokenSilent({
            account: currentUser,
            scopes: ['openid', 'profile', 'email'] // 必须包含openid scope才能获取IdToken
          });
          const newIdToken = tokenResponse.idToken;
          setIdToken(newIdToken);
          localStorage.setItem('msalIdToken', newIdToken);
        } catch (error) {
          // 处理静默获取失败的情况，比如需要重新登录
          console.error('获取IdToken失败:', error);
        }
      }
    })
    .catch((error) => console.log(error));
}, []);

2. 配置MSAL缓存策略（可选） #

检查你的MSAL实例配置，确保启用了本地缓存（默认启用，但可明确配置）：

const msalConfig = {
  auth: {
    clientId: '你的客户端ID',
    authority: 'https://login.microsoftonline.com/你的租户ID',
    redirectUri: '你的重定向地址'
  },
  cache: {
    cacheLocation: 'localStorage', // 默认为sessionStorage，改为localStorage可跨页面持久化
    storeAuthStateInCookie: false // 按需开启，用于IE等旧浏览器兼容
  }
};

const instance = new PublicClientApplication(msalConfig);

3. 页面刷新后从本地存储读取IdToken #

组件初始化时直接读取本地存储的IdToken，避免等待异步获取：

useEffect(() => {
  const savedIdToken = localStorage.getItem('msalIdToken');
  if (savedIdToken) {
    setIdToken(savedIdToken);
  }
}, []);

注意事项 #

• 确保请求的scopes包含openid，这是获取IdToken的必要条件。
• 本地存储的IdToken可能过期，使用前可通过jwt-decode库解析过期时间验证有效性。
• 若IdToken过期，acquireTokenSilent会自动刷新，失败则需引导用户重新登录。

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