NextJS MSAL-React对接Azure AD B2C重定向页面闪烁问题

采用Auth Code + PKCE重定向登录流程时，Azure AD B2C会将授权结果、自定义state参数全部放在URL hash片段中返回，hash内容仅客户端可读取：

• 服务端渲染阶段无法感知当前请求是登录重定向返回，会正常输出根路径/的首页HTML
• 原有逻辑在useEffect或组件挂载后才处理hash跳转，此时首页已经完成渲染绘制，必然出现闪屏
• MSAL默认配置navigateToLoginRequestUrl: true会等token解析完成后才触发跳转，执行时机过晚
• NextJS Middleware运行在服务端，无法获取URL hash内容，不可能提前完成跳转

1. 调整MSAL基础配置 #

初始化PublicClientApplication时关闭MSAL内置的延迟跳转逻辑，避免和自定义跳转冲突：

// msalConfig.js
import { PublicClientApplication } from "@azure/msal-browser";

export const msalConfig = {
  auth: {
    clientId: "你的Azure AD B2C应用ID",
    authority: "你的B2C策略签发地址",
    redirectUri: "/",
    navigateToLoginRequestUrl: false, // 核心配置，关闭默认跳转
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  }
};

export const msalInstance = new PublicClientApplication(msalConfig);

2. 在React渲染前完成重定向判断 #

不要在组件挂载后处理重定向逻辑，将判断时机提前到_app.tsx初始化阶段，重定向处理完成前不渲染任何业务页面，只展示全局加载态，从根源避免首页闪现：

// pages/_app.tsx
import { MsalProvider } from "@azure/msal-react";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { msalInstance } from "../lib/msalConfig";
import CustomNavigationClient from "../lib/CustomNavigationClient";

// 同步解析重定向目标路径，服务端阶段直接返回null
const getRedirectTarget = () => {
  if (typeof window === "undefined") return null;
  const hashContent = window.location.hash;
  const pathMatch = /~path~(.+)~path~/.exec(hashContent);
  return pathMatch?.[1] ? decodeURIComponent(pathMatch[1]) : null;
};

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  // 初始化时直接判断是否需要重定向，不等待组件挂载
  const [isReady, setIsReady] = useState(() => !getRedirectTarget());

  useEffect(() => {
    const targetPath = getRedirectTarget();
    if (targetPath) {
      // 清理URL中的敏感hash参数，避免重复触发
      window.history.replaceState(null, "", window.location.pathname);
      // 无历史记录跳转到目标页面
      router.replace(targetPath).finally(() => setIsReady(true));
      return;
    }

    // 非重定向场景初始化MSAL路由适配
    const navigationClient = new CustomNavigationClient(router);
    msalInstance.setNavigationClient(navigationClient);
    msalInstance.initialize()
      .then(() => msalInstance.handleRedirectPromise())
      .finally(() => setIsReady(true));
  }, [router]);

  // 处理完成前只渲染加载态，不输出任何业务页面内容
  if (!isReady) return <div className="global-loading">登录中，请稍候...</div>;

  return (
    <MsalProvider instance={msalInstance}>
      <Component {...pageProps} />
    </MsalProvider>
  );
}

export default MyApp;

3. 修正自定义路由客户端实现 #

补充路由就绪判断，避免NextJS路由未初始化导致的跳转失败：

// lib/CustomNavigationClient.js
import { NavigationClient } from "@azure/msal-browser";

export class CustomNavigationClient extends NavigationClient {
  constructor(router) {
    super();
    this.router = router;
  }
  async navigateInternal(url, options) {
    const relativePath = url.replace(window.location.origin, "");
    await this.router.ready(); // 等待路由初始化完成
    options.noHistory ? this.router.replace(relativePath) : this.router.push(relativePath);
    return false;
  }
}

4. 受保护页面配置 #

移除页面外层多余的<NoSsr>组件，登录请求的state参数继续保留自定义路径标记即可：

// pages/me.tsx
import { MsalAuthenticationTemplate, InteractionType } from "@azure/msal-react";
import { useRouter } from "next/router";

const loginRequest = {
  scopes: ["你的接口权限声明"],
  state: `~path~${router.asPath}~path~`,
};

export default function MePage() {
  return (
    <MsalAuthenticationTemplate
      interactionType={InteractionType.Redirect}
      authenticationRequest={loginRequest}
    >
      <div>个人中心页面内容</div>
    </MsalAuthenticationTemplate>
  );
}

注意：不需要修改Azure AD B2C侧的重定向URL配置，该方案可自动适配所有新增的受保护路由。

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