React中使用MSAL 2.0实现访问URL直接跳转AAD登录页问题

前置准备 #

默认你已经完成MSAL 2.0的基础依赖安装，执行过npm install @azure/msal-browser @azure/msal-react。 #

实现步骤 #

1. 配置MSAL实例与授权参数 #

首先创建MSAL配置文件，定义你的AAD应用参数和需要传递的scope列表：

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

// MSAL基础配置
const msalConfig = {
  auth: {
    clientId: "你的AAD应用客户端ID",
    authority: "https://login.microsoftonline.com/你的AAD租户ID",
    redirectUri: window.location.origin, // 需和AAD应用注册的回跳地址完全一致
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  }
};

// 登录授权请求，这里填所有需要的scope参数
export const loginRequest = {
  scopes: ["User.Read", "Mail.Read", "自定义APIScope"]
};

export const msalInstance = new PublicClientApplication(msalConfig);

2. 根组件挂载时自动触发登录 #

在应用根组件的初始化生命周期中处理重定向逻辑，未登录状态下直接触发AAD跳转：

// src/App.jsx
import { useEffect } from 'react';
import { msalInstance, loginRequest } from './config/msalConfig';
import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react';

function App() {
  useEffect(() => {
    // 优先处理AAD登录成功后的重定向回包，避免重复触发跳转
    msalInstance.handleRedirectPromise()
      .then(loginRes => {
        // 存在登录回包说明刚从AAD跳转回来，已完成登录
        if (loginRes) return;
        // 无回包时检查是否已有登录账户
        const accountList = msalInstance.getAllAccounts();
        if (accountList.length === 0) {
          // 无有效登录态，直接触发重定向登录，自动携带预设的scope参数
          msalInstance.loginRedirect(loginRequest);
        }
      })
      .catch(err => {
        console.error("登录流程错误: ", err);
      });
  }, []);

  return (
    <div className="App">
      {/* 登录成功后展示的业务内容 */}
      <AuthenticatedTemplate>
        <h1>系统首页</h1>
        {/* 你的业务组件 */}
      </AuthenticatedTemplate>

      {/* 未登录跳转前的加载提示，避免页面空白 */}
      <UnauthenticatedTemplate>
        <p>正在跳转至登录页...</p>
      </UnauthenticatedTemplate>
    </div>
  );
}

export default App;

3. 入口文件包裹MSAL上下文 #

// src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { MsalProvider } from '@azure/msal-react';
import { msalInstance } from './config/msalConfig';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <MsalProvider instance={msalInstance}>
    <App />
  </MsalProvider>
);

注意事项 #

• 若使用类组件，将自动登录逻辑移到componentDidMount生命周期即可，逻辑完全一致
• 若应用有路由守卫需求，可将自动登录逻辑移到路由拦截器中，实现所有路由访问前的登录校验
• 所有需要的授权scope直接写在loginRequest.scopes数组中，MSAL会自动将参数拼接到AAD授权请求中

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