MSAL.ts中AuthenticatedTemplate页面在重定向登录前闪现问题求助

问题描述 #

技术栈：Vite + TypeScript，使用MSAL库对接Azure B2C身份认证，msalConfig中cacheLocation配置为localStorage。访问<AuthenticatedTemplate>内页面时出现以下问题：

• 无本地存储会话时，直接重定向到<UnauthenticatedTemplate>首页，符合预期；
• 浏览器有活跃会话时，可直接访问页面，无闪烁或重定向；
• 闲置一段时间后，用户会先短暂看到<AuthenticatedTemplate>内的页面，再被重定向到Azure B2C登录页。

尝试过的方案：

• 将cacheLocation改为sessionStorage可解决问题，但丢失跨浏览器会话功能；
• 使用useMsal钩子的inProgress值，判断inProgress !== "startup"时才渲染页面，未解决问题。

需要解决的问题：如何在确认用户拥有B2C租户有效会话前，阻止访问受保护页面？

解决方案 #

1. 结合inProgress与账号有效性检查 #

inProgress仅能判断MSAL的初始化状态，但localStorage中的缓存可能已过期。需同时检查是否存在未过期的有效账号和inProgress状态：

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

const ProtectedPage = () => {
  const { accounts, inProgress } = useMsal();

  // 验证账号对应的ID Token是否未过期
  const hasValidAccount = accounts.some(account => {
    const expTimestamp = account.idTokenClaims?.exp;
    if (!expTimestamp) return false;
    return Date.now() < expTimestamp * 1000;
  });

  // 初始化未完成 或 无有效账号时，展示加载状态/直接跳转
  if (inProgress !== "none" || !hasValidAccount) {
    return <div>加载中...</div>;
  }

  return (
    <AuthenticatedTemplate>
      {/* 受保护页面内容 */}
    </AuthenticatedTemplate>
  );
};

2. 路由层面统一拦截 #

利用React Router的路由守卫，在路由入口处统一验证会话有效性，避免页面渲染：

import { Navigate, Outlet } from "react-router-dom";
import { useMsal } from "@azure/msal-react";

const ProtectedRoute = () => {
  const { accounts, inProgress } = useMsal();

  const hasValidAccount = accounts.some(account => {
    const expTimestamp = account.idTokenClaims?.exp;
    return expTimestamp && Date.now() < expTimestamp * 1000;
  });

  // MSAL初始化或登录流程中，展示加载状态
  if (inProgress === "startup" || inProgress === "login") {
    return <div>加载中...</div>;
  }

  // 无有效账号则跳转到首页，否则渲染子路由
  return hasValidAccount ? <Outlet /> : <Navigate to="/" />;
};

将所有受保护路由嵌套在ProtectedRoute下，即可实现全局的会话验证拦截。

3. 配置MSAL提前静默刷新Token #

在MSAL初始化配置中设置refreshBeforeTokenExpires，让MSAL在Token过期前自动尝试静默刷新，避免因Token过期导致的跳转闪烁：

const msalConfig = {
  auth: {
    clientId: "你的客户端ID",
    authority: "https://你的B2C租户.b2clogin.com/你的B2C租户.onmicrosoft.com/你的用户流",
    redirectUri: "/",
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: false,
    refreshBeforeTokenExpires: 600000, // 提前10分钟触发静默刷新
  },
};

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