React+MSAL配置Azure SSO后无法跳转/home及生成Token问题

以下是针对你遇到问题的具体排查和解决步骤：

1. 验证MSAL实例与Azure后台的RedirectUri一致性 #

确保代码中PublicClientApplication配置的redirectUri和Azure门户里的配置完全一致，包括协议、端口、路径（注意末尾是否带斜杠）：

const msalInstance = new PublicClientApplication({
  auth: {
    clientId: "你的客户端ID",
    authority: "https://login.microsoftonline.com/你的租户ID",
    redirectUri: "http://localhost:5173/home" // 必须和Azure后台配置丝毫不差
  }
});

同时确认Azure后台的RedirectUri是配置在**单页应用(SPA)**分类下，而非Web应用/API分类——MSAL React属于SPA应用，平台类型不匹配会导致回调失败。

2. 检查登录请求的作用域与权限配置 #

• 登录时的请求作用域必须包含你配置的openid、profile、email，格式要正确：

  const loginRequest = {
    scopes: ["openid", "profile", "email"]
  };
  

• 登录Azure门户，确认你添加的权限已经完成管理员同意（尤其是租户级应用，未同意的权限无法正常获取Token）。

3. 确认应用的MSAL包裹与路由逻辑 #

• 确保MsalProvider包裹了整个应用的路由组件，否则MSAL无法全局管理登录状态：

  function App() {
    return (
      <MsalProvider instance={msalInstance}>
        <BrowserRouter>
          <Routes>
            <Route path="/home" element={<HomePage />} />
            <Route path="/login" element={<LoginPage />} />
          </Routes>
        </BrowserRouter>
      </MsalProvider>
    );
  }
  

• 登录按钮的点击事件需正确调用MSAL的登录方法：

  const handleLogin = () => {
    msalInstance.loginRedirect(loginRequest);
  };
  

4. 排查浏览器端的错误与请求 #

• 打开浏览器开发者工具的Console标签，查看是否有MSAL抛出的错误（比如RedirectUri不匹配、权限缺失等）。
• 切换到Network标签，检查向login.microsoftonline.com发送的请求响应，确认是否有明确的错误提示（比如权限未授予、客户端ID无效等）。

5. 完善Token获取逻辑 #

登录成功后，需主动从MSAL实例中获取账户和Token，可在/home页面中使用useMsal钩子实现：

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

function HomePage() {
  const { instance, accounts } = useMsal();
  const [accessToken, setAccessToken] = useState(null);

  useEffect(() => {
    if (accounts.length > 0) {
      const tokenRequest = {
        scopes: ["openid", "profile", "email"],
        account: accounts[0]
      };
      // 先尝试静默获取Token，失败则触发重定向获取
      instance.acquireTokenSilent(tokenRequest)
        .then(res => setAccessToken(res.accessToken))
        .catch(err => instance.acquireTokenRedirect(tokenRequest));
    }
  }, [instance, accounts]);

  return (
    <div>
      <h1>Home Page</h1>
      {accessToken && <p>获取到的Token：{accessToken}</p>}
    </div>
  );
}

export default HomePage;

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