Angular 5应用部署Azure App Service后深层链接失效如何解决？

你遇到的问题很典型：内部导航正常说明客户端路由逻辑没问题，直接访问深层链接跳首页，大概率是初始化阶段的守卫逻辑或服务器配置的细节出了问题。下面是一步步的排查和解决方案：

1. 优先排查AuthGuard的实现逻辑 #

这是最可能的根源：你的/search、/home甚至根路径重定向都加了AuthGuard。当直接访问/search时，Angular启动后会先执行该路由的守卫，如果你的守卫是同步判断认证状态，或者在异步状态未加载完成时就默认返回false，就会触发跳转——如果守卫里未认证时跳的是home而非login，自然会出现你看到的现象。

修复AuthGuard的异步逻辑 #

确保守卫等待认证状态加载完成后再做判断，用Observable返回结果避免过早重定向：

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    // 等待认证状态就绪，只取一次最新值
    return this.authService.isAuthenticated$.pipe(
      take(1),
      map(isAuthenticated => {
        if (isAuthenticated) {
          return true; // 已认证，允许访问目标路由
        } else {
          // 未认证时跳转到登录页，携带原链接以便登录后返回
          this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
          return false;
        }
      })
    );
  }
}

同时检查你的AuthService，确保isAuthenticated$是能正确反映用户登录状态的Observable（比如从localStorage读取token，或从API获取用户信息后更新状态）。

2. 简化根路由的守卫配置 #

你的根路径重定向规则加了canActivate: [AuthGuard]属于冗余配置——/home路由本身已经配置了守卫，根路由的重定向只是引导到home，不需要额外加守卫，冗余配置可能导致直接访问深层链接时出现逻辑冲突：

修改路由配置：

RouterModule.forRoot([
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'search', component: SearchComponent, canActivate: [AuthGuard] },
  // 移除根路径的canActivate
  { path: '', redirectTo: 'home', pathMatch: 'full' }
])

3. 验证web.config是否正确生效 #

虽然你已经配置了web.config，但要确保它确实部署到了正确位置：

• 登录Azure门户的App Service，打开高级工具（Kudu），进入wwwroot目录，确认web.config存在且内容正确。
• 测试一个不存在的路径（比如https://your-host/nonexistent-path），如果能正常加载Angular应用而非返回404，说明重写规则生效了。
• 如果web.config不在wwwroot，检查部署流程：Angular构建后要把web.config复制到dist文件夹根目录，再部署到Azure的wwwroot。

4. 检查Azure App Service的额外配置 #

• 确保配置 -> 常规设置里的“始终使用HTTPS”已启用，避免HTTP到HTTPS的重定向干扰路由路径。
• 检查是否有其他自定义重写规则或域名重定向设置（比如在配置 -> 重写规则里），这些可能覆盖了你配置的Angular路由重写。

按上述步骤排查，应该能解决直接访问深层链接跳首页的问题。

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