Angular2 在另一个守卫解决后运行守卫

Angular2中守卫解决后运行守卫的实现方法

typescript
// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable, of } from 'rxjs';
import { AuthService } from './auth.service';
import { flatMap } from 'rxjs/operators';
@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable | Promise | boolean | UrlTree {
    // Check if the user is authenticated
    const isAuthenticated = this.authService.isAuthenticated();
    // Simulate an asynchronous operation with of() and delay()
    return of(isAuthenticated).pipe(
      flatMap((result) => {
        if (result) {
          // If authenticated, allow navigation
          return of(true);
        } else {
          // If not authenticated, redirect to login or another route
          return of(false);
        }
      })
    );
  }
}

typescript
// post.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable, of } from 'rxjs';
import { AuthService } from './auth.service';
@Injectable({
  providedIn: 'root',
})
export class PostGuard implements CanActivate {
  constructor(private authService: AuthService) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable | Promise | boolean | UrlTree {
    // Check if the user has the required role
    const hasPermission = this.authService.hasPermission('viewPosts');
    // Simulate an asynchronous operation with of() and delay()
    return of(hasPermission).pipe(
      map((result) => {
        if (result) {
          // If has permission, allow navigation
          return true;
        } else {
          // If no permission, redirect to another route or show an error
          return false;
        }
      })
    );
  }
}