Angular 4基于Cookie的认证：如何实现组件/路由访问控制？

嘿，很高兴看到你已经搞定了Cookie认证的API调用部分！接下来的权限控制其实有几个很实用的方案，都是Angular项目里常用的，我给你一步步拆解：

这是最核心的一步，能直接拦截未认证用户访问受保护的路由。你可以通过CanActivate守卫来实现：

首先创建一个认证守卫服务：

ng generate guard auth

然后在守卫里编写逻辑，调用后端的认证检查接口（记得带withCredentials: true来传递Cookie），根据返回结果决定是否放行：

// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    // 调用后端的用户认证状态检查接口
    return this.http.get('/api/auth/check-auth-status', { withCredentials: true }).pipe(
      map(() => {
        // 认证通过，允许访问目标路由
        return true;
      }),
      catchError(() => {
        // 认证失败（比如Cookie过期、未登录），跳转到登录页并记录当前路由
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
        return of(false);
      })
    );
  }
}

接下来把守卫绑定到需要保护的路由上：

// app-routing.module.ts
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'user-profile', component: UserProfileComponent, canActivate: [AuthGuard] },
  // 其他公开路由（比如登录、首页）不需要加守卫
  { path: 'login', component: LoginComponent },
];

有时候你需要在组件里控制某个按钮、模块的显示/隐藏（比如只有管理员能看到“用户管理”按钮），这时候可以配合一个认证服务来维护用户权限：

先创建一个AuthService来管理用户的权限信息：

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

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 用BehaviorSubject缓存用户权限，方便组件订阅
  private userPermissions$ = new BehaviorSubject<string[]>([]);
  public currentPermissions$ = this.userPermissions$.asObservable();

  constructor(private http: HttpClient) {}

  // 从后端获取用户权限列表
  loadUserPermissions(): Observable<string[]> {
    return this.http.get<string[]>('/api/auth/user-permissions', { withCredentials: true }).pipe(
      map(permissions => {
        this.userPermissions$.next(permissions);
        return permissions;
      })
    );
  }

  // 快捷方法：检查用户是否拥有指定权限
  hasPermission(targetPermission: string): boolean {
    return this.userPermissions$.value.includes(targetPermission);
  }
}

然后在组件里直接使用这个服务来控制DOM渲染：

// dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  template: `
    <h1>仪表盘</h1>
    <!-- 只有拥有view_statistics权限的用户能看到统计模块 -->
    <div *ngIf="authService.hasPermission('view_statistics')" class="stats-panel">
      <!-- 统计内容 -->
    </div>
    <!-- 只有拥有manage_users权限的用户能看到管理按钮 -->
    <button *ngIf="authService.hasPermission('manage_users')" (click)="openUserManagement()">
      管理用户
    </button>
  `
})
export class DashboardComponent implements OnInit {
  constructor(public authService: AuthService) {}

  ngOnInit(): void {
    // 组件初始化时加载用户权限
    this.authService.loadUserPermissions();
  }

  openUserManagement(): void {
    // 逻辑代码
  }
}

为了减少不必要的API调用，你可以在用户登录成功后就调用authService.loadUserPermissions()，把权限缓存起来。之后路由守卫里可以先检查缓存的权限，如果存在就直接放行，不存在再调接口，这样能提升体验。

另外，记得处理Cookie过期的情况：如果后端返回401状态码，要及时清空缓存的权限，跳转到登录页。

内容的提问来源于stack exchange，提问作者Imad El Hitti