部署在Azure静态Web应用的React页面刷新后Token无法持久化

将React应用部署到Azure静态Web应用，采用MSAL进行身份验证，配置如下：

export const msalConfig = {
    auth: {
        clientId: "XXXXXXXXX",
        authority: b2cPolicies.authorities.signUpSignIn.authority,
        knownAuthorities: [b2cPolicies.authorityDomain],
        redirectUri: "https://XXXXX.azurestaticapps.net/",
        postLogoutRedirectUri: "https://XXXXXXXXX.azurestaticapps.net/"
        //redirectUri: "/",
        //postLogoutRedirectUri: "/"
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true
    },
    system: {
        allowNativeBroker: false,
    }
};
export const msalInstance = new PublicClientApplication(msalConfig);

本地运行时（redirectUri等设为"/"），页面刷新后Token可正常复用；但部署后刷新页面，Token返回"undefined"，页面间跳转时Token可正常使用，仅刷新时失效。尝试将存储改为sessionStorage，问题仍未解决。

• 配置Azure静态Web应用路由规则：Azure静态Web应用默认不处理SPA的刷新路由，需在项目根目录添加staticwebapp.config.json文件，设置路由重写确保刷新请求指向index.html，让MSAL能正常读取缓存。示例配置：

  {
    "routes": [
      {
        "route": "/*",
        "serve": "/index.html",
        "statusCode": 200
      }
    ]
  }
  

• 确保MSAL实例全局唯一且初始化时机正确：将MSAL实例放在单独模块导出，避免组件内部重复初始化，保证应用启动时先完成实例创建。
• 校验redirectUri一致性：检查Azure AD B2C应用注册中配置的redirectUri，必须与msalConfig中的值完全匹配，包括协议、域名和路径，不能有拼写或格式错误。
• 启用MSAL日志排查：在msalConfig的system字段添加日志配置，查看刷新时的具体错误信息，定位问题根源：

  system: {
      allowNativeBroker: false,
      loggerOptions: {
          loggerCallback: (level, message, containsPii) => {
              if (containsPii) return;
              switch (level) {
                  case LogLevel.Error:
                      console.error(message);
                      return;
                  case LogLevel.Info:
                      console.info(message);
                      return;
                  case LogLevel.Verbose:
                      console.debug(message);
                      return;
                  case LogLevel.Warning:
                      console.warn(message);
                      return;
              }
          }
      }
  }
  

• 完善页面初始化时的Auth处理：在应用入口组件（如App.js）中，先调用handleRedirectPromise()完成重定向处理，再尝试获取Token：

  useEffect(() => {
      const initAuth = async () => {
          await msalInstance.handleRedirectPromise();
          // 后续执行获取Token的逻辑
      };
      initAuth();
  }, []);
  

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