在React日历应用中基于Azure实现登录认证方案咨询

1. 安装Azure AD认证依赖 #

先安装官方提供的React认证库：

npm install @azure/msal-react @azure/msal-browser

2. 创建Azure AD配置文件 #

新建authConfig.js，填入你在Azure Portal应用注册中获取的信息：

import { PublicClientApplication } from "@azure/msal-browser";

export const msalConfig = {
  auth: {
    clientId: "你的Azure应用Client ID",
    authority: "https://login.microsoftonline.com/你的租户ID", // 可填具体租户ID或"common"
    redirectUri: "http://localhost:3000", // 需与Azure注册的回调地址一致
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  }
};

export const msalInstance = new PublicClientApplication(msalConfig);

// 定义登录所需权限，可根据需求调整
export const loginRequest = {
  scopes: ["User.Read"]
};

3. 修改Index.js注入认证上下文 #

将MSAL Provider包裹在应用外层，确保认证状态全局可用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { MsalProvider } from '@azure/msal-react';
import { msalInstance } from './authConfig';
import { ContextWrapper } from './ContextWrapper';
import App from './App';

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

4. 改造Header.js实现登录状态控制 #

使用useMsal钩子获取登录状态，动态控制按钮显示隐藏：

import { useMsal } from '@azure/msal-react';
import { loginRequest } from './authConfig';
import { useNavigate } from 'react-router-dom';

export default function CalendarHeader() {
  const { instance, accounts } = useMsal();
  const navigate = useNavigate();
  const isLoggedIn = accounts.length > 0;

  const handleLogin = () => {
    instance.loginPopup(loginRequest).catch(error => {
      console.error('登录失败:', error);
    });
  };

  const handleLogout = () => {
    instance.logoutPopup().catch(error => {
      console.error('登出失败:', error);
    });
  };

  return (
    <div>
      {/* 未登录时显示登录按钮 */}
      {!isLoggedIn && (
        <button className="button-calendar-today" onClick={handleLogin}>
          Sign-In
        </button>
      )}
      {/* 登录后显示Admin入口与登出按钮 */}
      {isLoggedIn && (
        <>
          <button className="button-calendar-today" onClick={() => navigate("/adminPage")}>
            Admin Page
          </button>
          <button className="button-calendar-today" onClick={handleLogout}>
            Sign-Out
          </button>
        </>
      )}
    </div>
  );
}

5. 保护AdminPage路由 #

自定义路由守卫组件，确保未登录用户无法直接访问Admin页面：

import { useMsal } from '@azure/msal-react';
import { Router, Routes, Route, Navigate } from 'react-router-dom';
import CalendarHeader from './Header';
// 导入其他组件...

// 自定义路由守卫
const ProtectedRoute = ({ children }) => {
  const { accounts } = useMsal();
  return accounts.length > 0 ? children : <Navigate to="/" />;
};

export default function App() {
  const currentMonth = /* 保留你的月份逻辑 */;

  return (
    <Router>
      <Routes>
        <Route exact path="/" element={
          <React.Fragment>
            <div className="overall">
              <CalendarHeader />
              <div className="main-content-area">
                <Sidebar />
                <Month month={currentMonth} />
                <EventModal />
              </div>
            </div>
          </React.Fragment>
        } />
        <Route path="/addEvents" element={<UpdateEventsForms />} />
        <Route path="/editdeletedata" element={<EditAndDelete />} />
        {/* 保护Admin路由 */}
        <Route path="/adminPage" element={
          <ProtectedRoute>
            <AdminPage />
          </ProtectedRoute>
        } />
      </Routes>
    </Router>
  );
}

关键注意事项 #

• 需在Azure Portal注册单页应用（SPA），配置正确的回调地址，获取对应的Client ID和租户ID。
• 通过accounts.length > 0判断用户登录状态，msal-react会自动维护认证会话。
• 登录方式可选择loginPopup（弹窗）或loginRedirect（页面跳转），按需切换。

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