React集成msal-browser部署Azure App Service后登录死循环问题求助

你遇到的无限重定向和token接口400问题不是单纯authConfig配置错误，是代码实现和部署适配两方面的问题共同导致的，修复方案如下： #

1. 修复PublicClientApplication实例重复创建问题 #

你将new PublicClientApplication(msalConfig)写在了HOC的返回组件内部，只要组件重渲染就会生成全新的MSAL实例，之前存在sessionStorage里的登录状态、请求上下文会和新实例完全不匹配，实例会判定当前用户未登录，反复触发重定向逻辑。

修复代码 #

将PCA实例初始化移到组件外部，全局仅初始化一次：

// withAuthHOC.tsx 顶部全局位置
const pca = new PublicClientApplication(msalConfig);

const withAuthHOC = (WrappedComponent: React.FunctionComponent) => {
    return () => {
        useMsalRedirect();
        return (
            <MsalProvider instance={pca}>
                <AuthenticatedValidation />
                <AuthenticatedTemplate>
                    <WrappedComponent />
                </AuthenticatedTemplate>
            </MsalProvider>
        );
    }
};

2. 修复AuthenticatedValidation的useEffect逻辑问题 #

你当前的useEffect没有传入依赖数组，每次组件渲染都会执行，即使登录状态已更新、交互仍在进行中也会误触发重定向。

修复代码 #

补充完整依赖数组：

// AuthenticatedValidation.tsx
useEffect(() => {
    if (inProgress === InteractionStatus.None && !isAuthenticated) {
        instance.loginRedirect(loginRequest);
    }
}, [inProgress, isAuthenticated, instance]);

3. 适配Azure App Service部署的配置优化 #

如果完成以上两步仍存在问题，调整authConfig的缓存配置，适配云服务部署场景：

// authConfig.js
cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: true, // 开启后避免多路由跳转、网络波动导致的状态丢失
},

同时确认以下配置完全匹配：

• B2C应用注册的重定向URI和redirectUri配置完全一致，结尾的斜杠不能省略
• IEF自定义策略返回的id_token中必须包含tfp声明，匹配你配置的策略名称

4. token接口400补充排查 #

如果token接口还是返回400，可在浏览器网络面板查看该请求的具体响应报文，常见原因还有：

• 自定义策略配置错误，返回的令牌格式不符合MSAL要求
• 请求的scope未在应用注册中授权，可在loginRequest的scopes数组中添加你注册的应用暴露的scope做测试

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