React应用使用MSAL时acquireTokenSilent始终返回'No accounts available'问题

问题描述 #

我正在开发一个React.js应用，已使用MSAL实现认证功能，登录流程正常，成功后能跳转到正确的重定向URI（URL为http://localhost:3000#code=0.XXX.YYY&client_info=CCC&state=SSSS&session_state=SSSSUUU）。但调用acquireTokenSilent获取用户数据时，始终收到'No accounts available.'提示，控制台打印的accounts对象始终为空。

相关代码片段：

const { instance, accounts } = useMsal();
const [user, setUser] = useState(null);

useEffect(() => {
    const fetchUserData = async () => {
        console.log("Accounts:", accounts);
        if (accounts.length > 0) {
            try {
                const accessTokenResponse = await instance.acquireTokenSilent({
                    scopes: ['User.Read.All'],
                    account: accounts[0]
                });

                const response = await fetch('https://graph.microsoft.com/v1.0/me', {
                    headers: {
                        Authorization: `Bearer ${accessTokenResponse.accessToken}`,
                    },
                });

                if (!response.ok) {
                    throw new Error(`Network response was not ok: ${response.statusText}`);
                }

                const data = await response.json();
                setUser(data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        } else {
            console.log('No accounts available.');
        }
    };

    fetchUserData();
}, [accounts, instance]);

可能的原因及解决方法 #

1. MSAL未处理登录后的重定向回调 #

登录成功重回应用时，MSAL需要解析URL中的授权码完成令牌交换，并将账户信息存入缓存。若跳过这一步，accounts会始终为空。

解决方法：
在应用入口组件（如App.js）中调用handleRedirectPromise处理重定向逻辑：

import { useMsal } from '@azure/msal-react';

function App() {
  const { instance } = useMsal();

  useEffect(() => {
    instance.handleRedirectPromise()
      .then((response) => {
        // 可在此处理登录成功后的页面跳转等逻辑
      })
      .catch((error) => {
        console.error('重定向处理失败:', error);
      });
  }, [instance]);

  // 其他组件内容
}

2. 重定向URI配置不匹配 #

Azure AD应用注册中设置的重定向URI与本地MSAL配置的redirectUri不一致时，MSAL无法完成授权流程，导致账户信息不被缓存。

解决方法：

• 登录Azure门户，找到目标应用注册，在「身份验证」页面确认重定向URI包含http://localhost:3000（或你实际使用的URI）；
• 保证MSAL初始化配置中的redirectUri与门户配置完全一致：

const msalConfig = {
  auth: {
    clientId: '你的Client ID',
    authority: 'https://login.microsoftonline.com/你的租户ID',
    redirectUri: 'http://localhost:3000' // 必须和Azure门户配置一致
  }
};

3. 登录方法未正确触发账户缓存更新 #

若自行处理登录跳转逻辑，而非使用MSAL标准的loginRedirect或loginPopup方法，可能导致账户信息未被正确缓存。

解决方法：
使用MSAL提供的标准登录方法触发认证：

// 重定向登录示例
const handleLogin = () => {
  instance.loginRedirect({
    scopes: ['User.Read.All'] // 登录时预先请求必要权限
  });
};

4. 浏览器缓存或会话异常 #

浏览器本地存储被清空、MSAL缓存条目丢失，会导致无法读取账户信息。

解决方法：

• 打开浏览器开发者工具，查看「Application > Local Storage」中是否存在msal.xxx开头的缓存条目；
• 清除浏览器缓存后重新登录，测试账户信息是否能正常写入缓存。

5. MSAL版本兼容性问题 #

@azure/msal-react与@azure/msal-browser版本不匹配，可能引发账户加载异常。

解决方法：
同步更新两个依赖包到最新版本：

npm install @azure/msal-react@latest @azure/msal-browser@latest

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