Azure静态Web应用未认证用户访问限制异常问题求助

首次点击页面时是通过React客户端路由跳转，请求的始终是根路径的index.html，Azure静态Web应用的路由权限规则不会拦截这个请求，所以匿名用户能加载对应组件；但刷新页面时，浏览器会直接向Azure服务器请求当前路径（比如/records），触发Azure的路由权限检查，匿名用户没有authenticated角色，因此返回401错误。

1. 添加React客户端路由守卫 #

创建一个权限校验路由组件，在渲染受保护页面之前检查用户认证状态和角色，未通过则重定向到首页或登录页：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

// 从Azure静态Web Apps的全局对象获取认证状态
const checkAuthStatus = () => {
  return window?.azureStaticWebApps?.auth?.isAuthenticated || false;
};

// 校验用户是否拥有所需角色
const checkRequiredRoles = (allowedRoles) => {
  if (!allowedRoles) return true;
  const userRoles = window?.azureStaticWebApps?.auth?.userRoles || [];
  return allowedRoles.some(role => userRoles.includes(role));
};

const PrivateRoute = ({ component: Component, allowedRoles, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        checkAuthStatus() && checkRequiredRoles(allowedRoles) ? (
          <Component {...props} />
        ) : (
          <Redirect to="/" />
          // 若需要直接跳转Azure登录页，可替换为：window.location.href = '/.auth/login/azureadb2c'
        )
      }
    />
  );
};

修改React路由配置，用PrivateRoute替换受保护页面的原路由：

<Switch>
    <Route path='/' exact component={Dashboard} />
    <PrivateRoute path='/records' component={Records} allowedRoles={["authenticated"]} />
    <PrivateRoute path='/livecam' component={LiveCamera} allowedRoles={["authenticated"]} />
    <Route path='/debug' component={Debug} />
    <PrivateRoute path='/settings' component={Settings} allowedRoles={["admin"]} />
</Switch>

2. 调整Azure静态Web应用路由配置 #

• 补全/settings的路由匹配规则为/settings*，避免子路由绕过权限检查
• 添加401错误的重定向规则，让刷新后返回的401请求重新加载index.html，交由React客户端路由处理

修改后的routes.json：

{
"routes": [
    {
        "route": "/records*",
        "allowedRoles": ["authenticated"]
    },
    {
        "route": "/livecam*",
        "allowedRoles": ["authenticated"]
    },
    {
        "route": "/settings*",
        "allowedRoles": ["admin"]
    }
],
"navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/assets/*.{png,jpg,jpeg,gif,bmp}", "/static/css/*"]
},
"mimeTypes": {
    ".json": "text/json"
},
"responseOverrides": {
    "400": {
        "rewrite": "/invalid-invitation-error.html"
    },
    "401": {
        "rewrite": "/index.html"
    }
}
}

3. 监听认证状态变化（可选） #

在React应用入口组件中添加认证状态监听，实时同步用户权限变化：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleAuthChange = () => {
      // 这里可以更新应用内的认证状态（比如存入Context或State）
    };

    if (window.azureStaticWebApps?.auth) {
      window.azureStaticWebApps.auth.subscribe(handleAuthChange);
      return () => window.azureStaticWebApps.auth.unsubscribe(handleAuthChange);
    }
  }, []);

  // ... 其他组件逻辑
}

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