Angular 11应用部署为Azure静态Web应用时Auth Guard重定向失效问题排查

这问题我之前部署Angular应用到Azure静态Web应用时也踩过一模一样的坑！本地跑完全正常，但一上线上就出404，核心原因是Azure静态Web应用默认会把所有直接访问的路由当成静态文件路径去查找，而Angular是单页应用（SPA），所有路由都是客户端层面的逻辑，没有对应的物理文件，所以Azure直接返回404，根本没轮到你的Auth Guard执行。

下面是具体的解决步骤：

1. 添加静态Web应用配置文件 #

在你的Angular项目根目录下创建一个名为 staticwebapp.config.json 的文件，内容如下：

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/*.{css,js,png,jpg,gif}"]
  }
}

这个配置的作用是：

• 把所有匹配不到静态资源的请求，都重写转发到 index.html，让Angular的路由系统来接管请求
• 特意排除了css、js、图片这类静态资源，避免它们被错误转发，保证静态资源能正常加载

2. 确认Angular路由配置匹配 #

检查你的 app-routing.module.ts，确保登录页的路由路径和Auth Guard里写的 ["/account/login"] 完全一致，比如：

const routes: Routes = [
  { path: 'account/login', component: LoginComponent },
  { 
    path: 'protected', 
    component: ProtectedComponent,
    canActivate: [AuthGuard] 
  },
  // 其他路由配置...
];

3. 验证Auth Guard的Token判断逻辑 #

虽然本地正常，但可以简单确认线上环境的token读取是否正常：

• 在浏览器控制台手动输出 authenticationService.currentTokenValue，看是否能正确获取到存储的token
• 确保你的认证服务在Azure环境下能正常访问localStorage（Azure静态Web应用是客户端运行，逻辑和本地一致，一般不会有问题，但排查时可以确认下）

最后部署验证 #

把这个 staticwebapp.config.json 文件添加到Git仓库，重新部署到Azure静态Web应用。之后再直接访问受保护页面，Azure会先把请求转发到index.html，Angular加载完成后就会执行Auth Guard的逻辑，就能正确重定向到登录页了。

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