React+Azure静态Web应用：初始加载与刷新时的受保护路由问题

1. 首次加载可渲染受保护组件的原因 #

Azure Static Web Apps（ASWA）的路由权限校验是基于HTTP请求的服务端/边缘层校验，而React Router是客户端路由机制：

• 首次访问/时，浏览器向ASWA发送根路径请求，由于navigationFallback配置，服务器直接返回index.html，不会触发/platform/*的权限规则。
• 页面加载完成后，React在客户端执行路由逻辑，通过<Navigate>直接跳转到/platform/dashboard——这个过程完全在浏览器端完成，没有发起新的HTTP请求，所以ASWA的权限校验根本没被触发，导致组件直接渲染。
• 刷新页面时，浏览器会直接向ASWA请求/platform/dashboard，此时ASWA的路由规则拦截请求，返回401，触发responseOverrides的重定向逻辑。

2. 确保首次加载也拦截未认证用户的方案 #

必须结合客户端路由守卫和ASWA的服务端校验，实现双重保障：

步骤1：实现React Router客户端权限守卫 #

创建一个RequireAuth组件，用于包裹所有受保护路由：

import { useEffect, useState } from 'react';
import { Outlet, Navigate, useLocation } from 'react-router-dom';

const RequireAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
  const location = useLocation();

  useEffect(() => {
    // 调用ASWA内置的认证端点，获取用户登录状态
    fetch('/.auth/me')
      .then(response => response.json())
      .then(data => {
        setIsAuthenticated(data.clientPrincipal !== undefined);
      })
      .catch(() => {
        setIsAuthenticated(false);
      });
  }, []);

  // 加载状态可自定义加载组件
  if (isAuthenticated === null) {
    return <div>验证中...</div>;
  }

  return isAuthenticated ? (
    <Outlet />
  ) : (
    <Navigate to="/login" state={{ from: location }} replace />
  );
};

export default RequireAuth;

步骤2：修改路由结构，用守卫包裹受保护路由 #

<BrowserRouter>
  <Routes>
    {/* 公开页面 */}
    <Route element={<PublicPageParent />}>
      <Route path="/public/details" element={<SomeComponent />} />
      <Route path="/report" element={<ReportComponent />} />
    </Route>

    {/* 受保护路由：用RequireAuth统一守卫 */}
    <Route element={<RequireAuth />}>
      <Route path="/platform/dashboard" element={<Dashboard />} />
      <Route path="/platform/users" element={<Users />} />
    </Route>

    {/* 默认重定向：若根路径需保护，可移入RequireAuth路由下 */}
    <Route path="/" element={<Navigate to="/platform/dashboard" />} />
  </Routes>
</BrowserRouter>

步骤3：优化ASWA配置（可选） #

如果希望根路径的HTTP请求也直接触发校验，可在routes中添加根路径规则：

"routes": [
  // ...登录/登出路由
  {
    "route": "/",
    "allowedRoles": ["authenticated"]
  },
  {
    "route": "/platform/*",
    "allowedRoles": ["authenticated"]
  }
]

这样首次访问/时，ASWA会直接返回401并重定向到登录页，彻底避免客户端路由跳转的漏洞。

3. 替代window.location.assign的安全导航方案 #

完全可以继续使用React Router的<Link>或useNavigate钩子，只要配合客户端权限守卫即可：

• 导航栏链接直接用<Link to="/platform/dashboard">Dashboard</Link>，当用户未认证时，RequireAuth组件会自动拦截并跳转到登录页。
• 编程式导航使用useNavigate钩子：

import { useNavigate } from 'react-router-dom';

const Navbar = () => {
  const navigate = useNavigate();

  const goToDashboard = () => {
    navigate('/platform/dashboard');
  };

  return <button onClick={goToDashboard}>Dashboard</button>;
};

核心逻辑是：客户端路由跳转后，RequireAuth会自动校验用户状态，确保未认证用户无法进入受保护页面；同时ASWA的服务端校验作为兜底，防止用户直接通过URL绕过客户端守卫。

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