Azure静态Web应用中staticwebapp.config.json保护路由返回404问题

问题现象 #

本地使用SWA CLI模拟搭载Angular应用的Azure静态Web应用时，staticwebapp.config.json的路由保护配置正常，但发布到工作账号的Azure环境后出现以下问题：

• 直接在URL输入/test返回404错误（/home路由访问正常）
• 通过Angular的<a routerLink="/test">跳转可进入/test路由，但未触发预期的微软认证页面跳转
• 个人账号的Azure环境中无此问题

现有配置 #

staticwebapp.config.json #

{
  "navigationFallback": {
    "rewrite": "/index.html"
  },
  "routes": [
    {
      "route": "/test",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/.auth/login/github",
      "statusCode": 404
    },
    {
      "route": "/logout",
      "redirect": "/.auth/logout"
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  }
}

Angular路由配置（app-routing.module.ts） #

const routes: Routes = [
  {
    path: "home",
    component: AnalisysResultsComponent,
  },
  {
    path: "test",
    component: TestProtectedComponent
  },
  {
    path: "**",
    redirectTo: "home"
  }
];

排查与解决方案 #

1. 确保配置文件正确部署 #

检查Azure静态Web应用根目录是否存在staticwebapp.config.json，若缺失需调整Angular构建配置：
在angular.json的assets数组中添加该文件，确保构建时复制到dist根目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/staticwebapp.config.json"
]

2. 调整路由规则匹配优先级 #

Azure静态Web应用的路由规则按从上到下匹配，原配置中navigationFallback的优先级低于路由规则，可能导致直接访问/test时未触发回退到index.html。替换为通配符路由规则，确保所有前端路由被正确转发：
修改后的staticwebapp.config.json：

{
  "routes": [
    {
      "route": "/.auth/login/github",
      "statusCode": 404
    },
    {
      "route": "/logout",
      "redirect": "/.auth/logout"
    },
    {
      "route": "/test",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/*",
      "serve": "/index.html",
      "allowedRoles": ["anonymous"]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  }
}

3. 检查工作账号Azure环境的安全配置 #

• 确认静态Web应用的身份验证设置中，AAD提供者已正确配置，且允许当前工作租户访问
• 排查是否存在企业级条件访问策略，阻止未认证用户的跳转请求导致返回404
• 查看Azure静态Web应用的日志（门户→监控→日志），搜索/test的访问记录，定位具体错误原因

4. 补充Angular前端守卫确保认证触发 #

由于Angular前端路由跳转不经过Azure的路由规则，需添加认证守卫强制检查登录状态：

1. 安装@azure/msal-angular依赖（若未安装）
2. 创建认证守卫：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { MsalService } from '@azure/msal-angular';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private msalService: MsalService, private router: Router) {}

  canActivate(): boolean {
    const isAuthenticated = this.msalService.instance.getAllAccounts().length > 0;
    if (!isAuthenticated) {
      window.location.href = '/.auth/login/aad';
      return false;
    }
    return true;
  }
}

3. 在路由中应用守卫：

const routes: Routes = [
  {
    path: "home",
    component: AnalisysResultsComponent,
  },
  {
    path: "test",
    component: TestProtectedComponent,
    canActivate: [AuthGuard]
  },
  {
    path: "**",
    redirectTo: "home"
  }
];

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