在 Umi 4 中使用 Ant Design Pro Layout 以及 MSAL (Microsoft Authentication Library) 实现登录并获取令牌进入到首页，你需要按照以下步骤进行操作：

1. 安装所需依赖：
   使用 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: "https://login.microsoftonline.com/your-tenant-id",  
    redirectUri: "http://localhost:8000",  
  },  
};  

const msalInstance = new PublicClientApplication(msalConfig);  

export { msalInstance };  

请将 your-client-id 和 your-tenant-id 替换为在 Azure Portal 中注册的应用程序的相应值。

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  
  );  
}  

4. 创建一个登录组件，例如 src/pages/login/index.js，并实现 MSAL loginRedirect 方法：

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("https://graph.microsoft.com/v1.0/me", {  
        headers: {  
          Authorization: `Bearer ${accessToken}`,  
        },  
      });  
      const userInfo = await userResponse.json();  
      console.log(userInfo);  
    }  
  };  

  handleRedirect();  
}, [instance, history]);  

这段代码首先使用 acquireTokenSilent 方法获取访问令牌，然后使用 fetch API 调用 Microsoft Graph API 的 /me 端点以获取用户信息。获取到的用户信息将被输出到控制台。

现在，当用户成功登录并获取令牌后，应用程序将获取用户信息并将其输出到控制台。你可以根据需要自定义此代码以将用户信息存储在状态管理库（如 Redux 或 MobX）中或直接在组件状态中。