带订阅的Angular Auth Guard_带Promise和if语句的Angular Auth Guard_带angular的条带订阅 - 腾讯云开发者社区

带订阅的Angular Auth Guard

是Angular框架中的一个认证守卫，用于保护客户端应用程序中的受限页面或资源。它主要用于控制用户访问权限，并确保只有经过身份验证的用户才能访问特定的路由或组件。

带订阅的Angular Auth Guard可以通过以下步骤实现：

创建一个可观察对象，用于跟踪用户认证状态。这可以是一个带有认证状态的Subject对象。

import { BehaviorSubject } from 'rxjs';

export class AuthService {
  private isAuthenticatedSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  public isAuthenticated$ = this.isAuthenticatedSubject.asObservable();

  public login() {
    // 在用户登录后将认证状态设置为true
    this.isAuthenticatedSubject.next(true);
  }

  public logout() {
    // 在用户注销后将认证状态设置为false
    this.isAuthenticatedSubject.next(false);
  }
}

创建一个Auth Guard类来检查认证状态并决定是否授予访问权限。该类应该实现CanActivate接口并重写其canActivate()方法。

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

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

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService.isAuthenticated$.pipe(
      map(isAuthenticated => {
        if (isAuthenticated) {
          return true; // 允许访问
        } else {
          this.router.navigate(['/login']);
          return false; // 禁止访问
        }
      })
    );
  }
}

在路由配置中使用Auth Guard来保护受限页面或资源。可以将AuthGuard应用于某个路由或路由模块，以确保只有经过身份验证的用户才能访问。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [AuthGuard] // 使用AuthGuard进行认证保护
  }
];

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

带订阅的Angular Auth Guard可以在以下场景中应用：