React+MSAL部署Azure静态Web应用后登录异常求助

问题描述 #

• 本地环境正常：未认证时显示未认证视图，登录后可访问受保护路由；部署到Azure静态Web应用后，访问站点直接要求登录，登录后仍显示未认证视图，需再次登录才能加载已认证模板。
• 登录时随机跳转到主页并显示未认证视图，同时丢失URL参数，再次点击登录按钮可进入已认证主页，但URL参数无法恢复。

相关代码 #

authConfig.js #

import { LogLevel } from '@azure/msal-browser'
export const msalConfig = {
  auth: {
    authority:
      'https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxx',
    clientId: 'xxxxxxxxxxxxxxxxxxxxxx',
    redirectUri: '/',
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: false,
  },
}

export const logInRequest = {
  scopes: ['api://xxxxxxxxx/access_as_user'],
}

登录/登出函数 #

const handleLogin = (instance) => {
    instance.loginPopup(logInRequest).catch((e) => {
      console.log(e)
    })
  }

const handleLogout = (instance) => {
    instance.logoutRedirect({
      postLogoutRedirectUri: '/',
    })
  }

App.js 核心实现 #

const isAuthenticated = useIsAuthenticated()
isAuthenticated && requestAccessToken(instance, accounts)

return (
      <>
         <AuthenticatedTemplate>
            <Routes>
               <Route path="/" element={<zzzz/>} />
               <Route
                 path="/xx"
                 element={<xxxx/>}
               />
               {/* otherRoutes.....   */}
            </Routes>
         </AuthenticatedTemplate>
         <UnauthenticatedTemplate>
            <NotAuthenticatedView />
         </UnauthenticatedTemplate>
      </>
)

index.js 应用入口 #

import { msalConfig } from './authConfig'

const msalInstance = new PublicClientApplication(msalConfig)

ReactDOM.render(
  <React.StrictMode>
    <MsalProvider instance={msalInstance}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </MsalProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

解决方案 #

1. 调整生产环境缓存配置 #

Azure静态Web应用的生产环境受浏览器安全策略限制，localStorage可能无法正常读写，导致认证状态丢失。修改authConfig.js的缓存配置：

cache: {
  cacheLocation: 'localStorage',
  storeAuthStateInCookie: true, // 开启Cookie兜底存储认证状态
  secureCookies: true, // 仅在HTTPS环境下发Cookie，适配生产环境
}

2. 确保MSAL完成回调处理后再渲染应用 #

在index.js中，先让MSAL处理登录/登出后的回调逻辑，避免应用渲染时认证状态未同步：

const msalInstance = new PublicClientApplication(msalConfig);

// 优先处理认证回调
msalInstance.handleRedirectPromise()
  .then(() => {
    ReactDOM.render(
      <React.StrictMode>
        <MsalProvider instance={msalInstance}>
          <BrowserRouter>
            <App />
          </BrowserRouter>
        </MsalProvider>
      </React.StrictMode>,
      document.getElementById('root')
    );
  })
  .catch(err => {
    console.error('MSAL初始化失败:', err);
  });

3. 优化认证状态判断逻辑 #

替换useIsAuthenticated，直接通过useMsal获取账户列表判断认证状态，避免状态更新滞后：

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

// 在App组件中修改状态判断逻辑
const { instance, accounts } = useMsal();
const isAuthenticated = accounts.length > 0;

// 使用useEffect确保token请求仅在状态变更时执行
useEffect(() => {
  if (isAuthenticated) {
    requestAccessToken(instance, accounts);
  }
}, [isAuthenticated, instance, accounts]);

4. 修复URL参数丢失问题 #

改用loginRedirect替代loginPopup（弹窗模式易被浏览器拦截且参数传递不稳定），并在登录时保留原始URL参数：

const handleLogin = (instance) => {
  // 保留当前页面的URL参数
  const searchParams = new URLSearchParams(window.location.search).toString();
  const redirectUri = searchParams ? `/?${searchParams}` : '/';
  
  instance.loginRedirect({
    ...logInRequest,
    redirectUri: redirectUri,
  }).catch((e) => {
    console.log(e);
  });
}

5. 检查Azure端配置一致性 #

• 确认Azure AD应用注册的重定向URI已添加生产环境完整域名（如https://your-static-app.azurestaticapps.net/），不能仅用相对路径/。
• 验证Azure静态Web应用的身份提供者配置中，客户端ID、租户ID与代码中的msalConfig完全匹配。

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