使用loginRedirect时useMsal钩子无法获取账号问题排查

核心原因 #

重定向登录完成后，MSAL需要在配置的redirectUri页面中手动处理认证响应（调用handleRedirectPromise），否则不会将用户认证信息存入缓存，导致useMsal()获取的accounts始终为空。而弹窗登录是在当前页面完成认证流程，MSAL会自动处理响应，因此能正常填充accounts。

解决步骤 #

1. 创建重定向回调处理组件

新建AuthRedirect组件，专门处理MSAL重定向后的认证响应：

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

export default function AuthRedirect() {
  const { instance } = useMsal();

  useEffect(() => {
    const processRedirect = async () => {
      try {
        // 处理重定向回调，将认证结果存入缓存
        const authResponse = await instance.handleRedirectPromise();
        if (authResponse) {
          // 认证成功后跳转到主页或其他目标页面
          window.location.href = "/";
        }
      } catch (err) {
        console.error("重定向回调处理失败:", err);
      }
    };

    processRedirect();
  }, [instance]);

  return <div>登录验证中...</div>;
}

2. 在路由中配置回调页面

将/auth-redirect（即你配置的redirectUri路径）指向上面创建的组件：

<BrowserRouter>
  <Routes>
    {/* 其他业务路由 */}
    <Route path="/auth-redirect" element={<AuthRedirect />} />
  </Routes>
</BrowserRouter>

3. 优化重定向登录调用（可选但建议）

你的signInRedirect方法未传入loginRequest，建议和弹窗登录保持一致，传入所需的权限范围：

const signInRedirect = (instance: IPublicClientApplication) => {
  instance.loginRedirect(loginRequest);
};

额外检查项 #

• 确保Azure AD应用注册中配置的重定向URI和代码中msalConfig.auth.redirectUri完全一致（包括协议、端口、路径）
• 确认浏览器未禁用localStorage（你的缓存配置使用了localStorage）

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