MSAL React SPA登录重定向至指定页面后授权异常问题求助

1. 让RouteGuard等待MSAL认证流程完成 #

登录重定向后，MSAL需要时间加载用户信息和角色，此时RouteGuard直接判断权限会因数据未就绪返回未授权。修改RouteGuard组件，先等待MSAL认证流程结束再做校验：

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

const RouteGuard = ({ children }) => {
  const { instance, accounts, inProgress } = useMsal();

  // 等待MSAL完成重定向后的认证处理
  if (inProgress !== "none") {
    return <div>加载中...</div>;
  }

  const currentAccount = accounts[0];
  if (!currentAccount) {
    instance.loginRedirect({ redirectUri: process.env.REACT_APP_REDIRECT_URI });
    return null;
  }

  // 从ID Token中提取用户角色
  const userRoles = currentAccount.idTokenClaims?.roles || [];
  // 替换为你需要的目标角色
  if (!userRoles.includes("TodoListAccess")) {
    return <div>You are unauthorized to view this content</div>;
  }

  return children;
};

2. 验证redirectUri的完全一致性 #

• 检查Azure AD应用注册门户中，SPA的重定向URI必须和authConfig.js里的redirectUri完全匹配，包括末尾的斜杠（比如http://localhost:3000/todolist/），不能有任何拼写或格式差异。
• 确认authConfig.js配置无错误：

export const msalConfig = {
  auth: {
    clientId: "你的客户端ID",
    authority: "https://login.microsoftonline.com/你的租户ID",
    redirectUri: "http://localhost:3000/todolist/",
  },
  // 其他配置项...
};

3. 确保角色正确包含在ID Token中 #

• 在Azure AD应用注册的API权限页面，确认已添加目标应用角色，且完成了管理员同意授权。
• 进入令牌配置页面，启用roles声明，保证ID Token中会携带用户的角色信息。若未启用，需手动添加roles作为可选声明。

4. 确认路由配置的包裹顺序 #

确保MSAL Provider包裹了整个路由组件，保证路由能获取到MSAL的认证状态：

import { MsalProvider } from "@azure/msal-react";
import { PublicClientApplication } from "@azure/msal-browser";
import { msalConfig } from "./authConfig";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import RouteGuard from "./RouteGuard";
import TodoList from "./TodoList";

const msalInstance = new PublicClientApplication(msalConfig);

function App() {
  return (
    <MsalProvider instance={msalInstance}>
      <Router>
        <Routes>
          <Route 
            path="/todolist/" 
            element={
              <RouteGuard>
                <TodoList />
              </RouteGuard>
            } 
          />
          {/* 其他路由 */}
        </Routes>
      </Router>
    </MsalProvider>
  );
}

5. 避免重定向后的状态丢失 #

登录重定向后，不要手动清除URL中的授权码参数，让MSAL自动完成处理。如果使用HashRouter，建议切换为BrowserRouter（需确保服务器配置支持SPA路由的 fallback）。

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