Angular中CanActivate守卫集成Material2登录对话框咨询

Got it, let's break down how to integrate your working Material 2 login dialog with Angular's AuthGuard so it pops up before route activation, and only lets the user through if they log in successfully. Here's a step-by-step guide with code examples:

Since the login dialog is an asynchronous operation, your canActivate method needs to return an Observable<boolean> instead of a plain boolean. We’ll use Angular’s MatDialog to open the dialog and RxJS operators to handle retry logic for failed login attempts.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Observable } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { AuthService } from './auth.service';
import { LoginDialogComponent } from './login-dialog.component';
import { of } from 'rxjs';
import { switchMap, repeatWhen } from 'rxjs/operators';

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

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // Skip dialog if user is already logged in
    if (this.authService.isLoggedIn()) {
      return of(true);
    }

    // Open login dialog and handle results
    return this.openLoginDialog().pipe(
      switchMap((loginSuccess: boolean | null) => {
        if (loginSuccess === true) {
          // Login succeeded: allow route activation
          return of(true);
        } else if (loginSuccess === false) {
          // Login failed: trigger retry by throwing an error
          throw new Error('Login attempt failed');
        } else {
          // User canceled login: block route access
          return of(false);
        }
      }),
      // Re-open dialog automatically on failed login
      repeatWhen(errors => errors)
    );
  }

  private openLoginDialog(): Observable<boolean | null> {
    const dialogRef = this.dialog.open(LoginDialogComponent, {
      width: '400px',
      disableClose: true // Prevent closing by clicking outside dialog
    });

    // Return dialog closure result (true = success, false = failed, null = canceled)
    return dialogRef.afterClosed();
  }
}

Update your dialog to only close and return true when login succeeds. For failed attempts, keep the dialog open and show an error message so the user can retry.

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login-dialog',
  template: `
    <h2 mat-dialog-title>Sign In</h2>
    <mat-dialog-content>
      <mat-form-field class="full-width">
        <input matInput placeholder="Username" [(ngModel)]="username">
      </mat-form-field>
      <mat-form-field class="full-width">
        <input matInput type="password" placeholder="Password" [(ngModel)]="password">
      </mat-form-field>
      <div *ngIf="loginError" class="error-message">Invalid username or password</div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button (click)="onCancel()">Cancel</button>
      <button mat-button color="primary" (click)="onLogin()">Login</button>
    </mat-dialog-actions>
  `,
  styles: [`
    .full-width { width: 100%; margin-bottom: 16px; }
    .error-message { color: #dc3545; margin-top: 8px; }
  `]
})
export class LoginDialogComponent {
  username = '';
  password = '';
  loginError = false;

  constructor(
    private dialogRef: MatDialogRef<LoginDialogComponent>,
    private authService: AuthService
  ) {}

  onLogin() {
    this.loginError = false;
    this.authService.login(this.username, this.password).subscribe({
      next: (success) => {
        if (success) {
          // Close dialog and signal success to guard
          this.dialogRef.close(true);
        } else {
          // Show error, keep dialog open for retry
          this.loginError = true;
        }
      },
      error: () => this.loginError = true
    });
  }

  onCancel() {
    // Close dialog and signal cancellation to guard
    this.dialogRef.close(null);
  }
}

Your auth service should maintain a login state flag so the guard can skip the dialog if the user is already authenticated.

import { Injectable } from '@angular/core';
import { Observable, of, tap } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private isLoggedInFlag = false;

  login(username: string, password: string): Observable<boolean> {
    // Replace with your actual authentication API call
    return of(username === 'admin' && password === 'secure123').pipe(
      delay(1000), // Simulate network delay
      tap(success => this.isLoggedInFlag = success) // Update login state on success
    );
  }

  isLoggedIn(): boolean {
    return this.isLoggedInFlag;
  }
}

• Remove Automatic Retries: If you don’t want the dialog to re-open automatically on failure, delete the repeatWhen block in the guard. Users can click the "Login" button manually to retry.
• Allow External Dialog Close: Set disableClose: false in openLoginDialog() if you want users to close the dialog by clicking outside. Just handle the undefined result in the guard (treat it like a cancel).
• Redirect After Login: If you need to redirect to a specific page after login, modify the guard to return a UrlTree instead of true using Angular’s Router.createUrlTree().

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