如何通过Angular守卫与HTTP GET实现简单路由鉴权？

没问题！我来帮你一步步实现基于自定义HTTP头的Angular路由保护，结合你后端的用户校验逻辑来走：

一、先确认后端校验接口的实现 #

你已经有了UsersController，我们需要补充一个专门供Angular守卫调用的校验接口，用来验证请求头中的用户是否存在于数据库：

[Route("/api/[controller]")]
public class UsersController : Controller
{
    private readonly YourDbContext _dbContext;

    public UsersController(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    // 新增：供Angular校验用户身份的接口
    [HttpGet("validate")]
    public IActionResult ValidateUser()
    {
        // 读取自定义HTTP头（这里假设头名称是X-User-Identifier，你可以根据实际修改）
        var userIdentifier = Request.Headers["X-User-Identifier"].FirstOrDefault();
        
        if (string.IsNullOrEmpty(userIdentifier))
        {
            return Unauthorized("缺少用户标识头");
        }

        // 用where子句检查用户是否存在于数据库
        var userExists = _dbContext.Users.Any(u => u.Identifier == userIdentifier);
        
        if (userExists)
        {
            return Ok(new { IsAuthenticated = true });
        }
        else
        {
            return Unauthorized("用户不存在");
        }
    }
}

二、Angular前端实现步骤 #

1. 创建认证服务（AuthService） #

封装后端校验请求，同时维护全局的认证状态：

// auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 用BehaviorSubject维护认证状态，方便组件订阅
  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
  public isAuthenticated$ = this.isAuthenticatedSubject.asObservable();

  constructor(private http: HttpClient) {}

  // 调用后端校验接口
  validateUser(): Observable<boolean> {
    // 从本地存储获取用户标识（这里假设存在localStorage，你可以换成Cookie或其他存储方式）
    const userIdentifier = localStorage.getItem('userIdentifier') || '';
    const headers = new HttpHeaders({
      'X-User-Identifier': userIdentifier
    });

    return this.http.get<{ IsAuthenticated: boolean }>('/api/users/validate', { headers })
      .pipe(
        map(response => {
          const isAuth = response.IsAuthenticated;
          this.isAuthenticatedSubject.next(isAuth);
          return isAuth;
        })
      );
  }

  // 获取当前同步的认证状态
  getIsAuthenticated(): boolean {
    return this.isAuthenticatedSubject.value;
  }
}

2. 创建路由守卫（AuthGuard） #

实现CanActivate接口，在路由跳转前校验用户身份：

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

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

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 先检查本地缓存的认证状态，避免重复请求
    if (this.authService.getIsAuthenticated()) {
      return true;
    }

    // 调用后端接口校验，未认证则跳转到登录页
    return this.authService.validateUser().pipe(
      map(isAuth => {
        if (isAuth) {
          return true;
        }
        this.router.navigate(['/login']);
        return false;
      }),
      // 处理请求失败（比如网络错误、后端500），同样视为未认证
      tap({
        error: () => this.router.navigate(['/login'])
      })
    );
  }
}

3. 配置受保护的路由 #

在路由模块中为需要保护的路由添加守卫：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { ProtectedDashboardComponent } from './protected-dashboard/protected-dashboard.component'; // 你的受保护组件
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  // 受保护路由：应用AuthGuard
  { 
    path: 'dashboard', 
    component: ProtectedDashboardComponent,
    canActivate: [AuthGuard] 
  },
  // 其他公共路由...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 可选：添加HTTP拦截器（自动携带自定义头） #

为了避免每次请求都手动设置自定义头，可以添加一个拦截器，自动为所有请求注入用户标识头：

// auth.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const userIdentifier = localStorage.getItem('userIdentifier');
    
    if (userIdentifier) {
      // 克隆请求并添加自定义头（避免修改原始请求）
      const modifiedReq = req.clone({
        headers: req.headers.set('X-User-Identifier', userIdentifier)
      });
      return next.handle(modifiedReq);
    }

    return next.handle(req);
  }
}

然后在app.module.ts中注册拦截器：

// app.module.ts
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  ...
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许多个拦截器
    }
  ],
  ...
})
export class AppModule { }

注意事项 #

• 头名称一致性：前后端的自定义HTTP头名称必须完全一致，比如上面用的X-User-Identifier，别写错哦！
• 用户标识存储：如果是前端存储用户标识，建议用sessionStorage代替localStorage，关闭浏览器后自动清除，更安全；如果是后端设置的Cookie，直接从Cookie中读取即可。
• CORS配置：如果Angular和后端不在同一域名下，后端需要配置CORS，允许自定义头的传递（比如在ASP.NET Core中配置WithExposedHeaders和AllowAnyHeader）。

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