如何在直接访问本地主机URL时自动弹出Azure AD登录界面（无需按钮）

要实现未认证时自动跳转到微软登录页面，你需要在组件初始化时检查认证状态，并在未认证时自动触发登录流程，同时修正现有代码中的路由结构问题。以下是具体修改方案：

关键修改点 #

• 利用componentDidMount生命周期钩子，在组件挂载后立即检查用户认证状态，未认证则自动调用登录方法。
• 处理Azure AD登录后的回调逻辑，确保跳转回应用后正确更新认证状态。
• 合并重复的BrowserRouter，整个应用只需要一个路由容器。

修改后的完整代码 #

import Prices from "./pages/Prices";
import Ticket from "./pages/Ticket";
import Money from "./pages/Money";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { config } from "./AuthConfig";
import { PublicClientApplication, EventType } from '@azure/msal-browser';
import React from "react";

class App extends React.Component<any, any> {
  publicClientApplication: PublicClientApplication;

  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isAuthenticated: false,
      user: {}
    };
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.handleAuthRedirect = this.handleAuthRedirect.bind(this);

    this.publicClientApplication = new PublicClientApplication({
      auth: {
        clientId: config.appId,
        redirectUri: config.redirectUri,
        authority: config.authority
      },
      cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false
      }
    });

    // 监听登录成功事件，更新认证状态
    this.publicClientApplication.addEventCallback((event) => {
      if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
        this.setState({ isAuthenticated: true });
      }
    });
  }

  async componentDidMount() {
    // 检查缓存中是否已有登录状态
    const accounts = this.publicClientApplication.getAllAccounts();
    if (accounts.length > 0) {
      this.setState({ isAuthenticated: true, user: accounts[0] });
    } else {
      // 未登录则自动触发登录
      await this.login();
    }

    // 处理登录后的重定向回调
    await this.handleAuthRedirect();
  }

  async login() {
    try {
      // 使用redirect方式更适合自动跳转场景（popup会被浏览器拦截风险）
      await this.publicClientApplication.loginRedirect({
        scopes: config.scopes,
        prompt: "select_account"
      });
    } catch (err) {
      this.setState({
        isAuthenticated: false,
        user: {},
        error: err
      });
    }
  }

  async handleAuthRedirect() {
    // 处理登录重定向回来的结果
    try {
      await this.publicClientApplication.handleRedirectPromise();
      const accounts = this.publicClientApplication.getAllAccounts();
      if (accounts.length > 0) {
        this.setState({ isAuthenticated: true, user: accounts[0] });
      }
    } catch (err) {
      this.setState({ error: err });
    }
  }

  logout() {
    this.publicClientApplication.logoutPopup();
  }

  render() {
    // 加载状态可根据需要添加
    if (this.state.error) {
      return <div>认证出错: {this.state.error.message}</div>;
    }

    return (
      <BrowserRouter>
        <div className="App">
          {this.state.isAuthenticated ? (
            <>
              {/* 可添加登出按钮等导航元素 */}
              <button onClick={this.logout}>登出</button>
              <Routes>
                <Route path="/" element={<Prices />} />
                <Route path="/Money" element={<Money />} />
                <Route path="/Ticket" element={<Ticket />} />
              </Routes>
            </>
          ) : (
            <div>正在跳转至登录页面...</div>
          )}
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

重点说明 #

1. 自动触发登录：在componentDidMount中先检查账户缓存，无有效账户则调用loginRedirect（相比popup，redirect更适合自动跳转，避免浏览器弹窗拦截）。
2. 回调处理：handleAuthRedirect方法处理登录完成后重定向回应用的逻辑，确保正确更新认证状态。
3. 路由结构优化：将所有路由包裹在同一个BrowserRouter下，避免多个路由容器导致的路由异常。
4. 事件监听：通过MSAL的事件回调，在登录成功时自动更新组件状态。

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