在 Umi 4 中使用 Ant Design Pro Layout 以及 MSAL (Microsoft Authentication Library) 实现登录并获取令牌进入到首页，你需要按照以下步骤进行操作：
安装所需依赖：
使用 npm 或 yarn 安装所需的包：
或
npm install @azure/msal-browser @azure/msal-react ant-design/pro-layout
yarn add @azure/msal-browser @azure/msal-react ant-design/pro-layout
2. 配置 MSAL：
在项目中创建一个新文件，例如src/msalConfig.js。在此文件中，配置 MSAL 实例并导出它：
import { PublicClientApplication } from "@azure/msal-browser"; const msalConfig = { auth: { clientId: "your-client-id", authority: "/your-tenant-id", redirectUri: "http://localhost:8000", }, }; const msalInstance = new PublicClientApplication(msalConfig); export { msalInstance };
请将your-client-id和your-tenant-id替换为在 Azure Portal 中注册的应用程序的相应值。
注意：要想实现整个应用程序中管理用户的身份验证状态，在umi4之前layout 有children 属性直接用
MsalProvider标签包裹就可以。而umi4没有使用Outlet标签替代children，思考如何实现呢
3、更新src/app.tsx以包含MsalProvider：
import React from 'react'; import { history } from 'umi'; import { msalInstance } from './msalConfig'; import { MsalProvider } from '@azure/msal-react'; export function render(oldRender) { oldRender(); } export function rootContainer(container) { return React.createElement( MsalProvider, { instance: msalInstance, }, container ); }
解释app.tsx
这段代码是一个umi插件的入口文件，其中包含了两个函数：
render和rootContainer。
render函数是umi框架提供的函数，在应用程序启动之前会被调用，用来执行一些额外的初始化操作。在这个示例中，oldRender参数是一个回调函数，它会在render函数执行完毕后被调用，以便继续渲染应用程序。
rootContainer函数则是应用程序的根组件，它接收一个名为container的参数，该参数表示应用程序中所有其他组件的层次结构。在这个示例中，rootContainer函数返回一个MsalProvider组件，它是Azure Active Directory中的一个React组件，用于在整个应用程序中管理用户的身份验证状态。
MsalProvider组件接收一个名为instance的属性，它是一个MSAL实例，用于管理身份验证和令牌获取等操作。在这个示例中，msalInstance是从@/layouts/msalConfig导入的，它是一个MSAL实例的配置文件，包含了应用程序的客户端ID和租户ID等信息。最后，
rootContainer函数使用React.createElement函数将MsalProvider组件和container参数一起传递，以便将其作为根组件渲染到应用程序中。
4. 创建一个登录组件，例如src/pages/login/index.js，并实现 MSALloginRedirect方法：
import React from "react"; import { useMsal } from "@azure/msal-react"; const Login = () => { const { instance } = useMsal(); const handleLogin = () => { const loginRequest = { scopes: ["openid", "profile", "User.Read"], // 换成自己的租户授权信息}; instance.loginRedirect(loginRequest); }; return ( <div> <button onClick={handleLogin}>Login with Microsoft</button> </div> ); }; export default Login;
5. 使用 Ant Design Pro Layout 和Outlet路由标签实现登录跳转：
在src/layouts/index.js中，使用 ProLayout 和Outlet标签并在成功登录并获取到令牌后执行跳转到首页：
import React, { useEffect } from "react"; import ProLayout from "@ant-design/pro-layout"; import { Outlet } from "react-router-dom"; import { useMsal } from "@azure/msal-react"; import { useHistory } from "react-router-dom"; const Layout = () => { const { instance } = useMsal(); const history = useHistory(); useEffect(() => { const handleRedirect = async () => { const response = await instance.handleRedirectPromise(); if (response) { // 登录成功，跳转到首页 history.push("/"); } }; handleRedirect(); }, [instance, history]); return ( <ProLayout> <Outlet /> </ProLayout> ); }; export default Layout;
使用此代码，当用户成功登录
注意，我们做的是单页面应用在 Azure 的时候按照以下步骤
将redirectUri 设置为你的代码里的回调地址
拓展、
. 在成功登录后，你可以使用msal-browser的instance对象获取访问令牌并使用 Microsoft Graph API 获取用户信息。将以下代码添加到src/layouts/index.js文件中的useEffect函数内部：
useEffect(() => { const handleRedirect = async () => { const response = await instance.handleRedirectPromise(); if (response) { // 登录成功，跳转到首页 history.push("/"); // 获取访问令牌 const accessTokenRequest = { scopes: ["User.Read"], account: instance.getAccountByUsername(response.account.username), }; const accessTokenResponse = await instance.acquireTokenSilent(accessTokenRequest); const accessToken = accessTokenResponse.accessToken; // 使用访问令牌获取用户信息 const userResponse = await fetch("/v1.0/me", { headers: { Authorization: `Bearer ${accessToken}`, }, }); const userInfo = await userResponse.json(); console.log(userInfo); } }; handleRedirect(); }, [instance, history]);
这段代码首先使用acquireTokenSilent方法获取访问令牌，然后使用fetchAPI 调用 Microsoft Graph API 的/me端点以获取用户信息。获取到的用户信息将被输出到控制台。
现在，当用户成功登录并获取令牌后，应用程序将获取用户信息并将其输出到控制台。你可以根据需要自定义此代码以将用户信息存储在状态管理库（如 Redux 或 MobX）中或直接在组件状态中。
案例开源代码umi4+react18+add
