Angular AuthGuard未触发/user路由重定向问题求助

我使用Angular最新的AuthGuard实现方式，预期当用户未登录时，通过router.createUrlTree重定向至/user路由，但该重定向功能失效；当用户已登录时，守卫可正常放行并显示welcome页面。我在AuthGuard中订阅了AuthDataService的authSubStatus（一个发射布尔值的Subject）来判断登录状态，请求技术协助。

AuthGuard代码 #

import { inject, Injectable } from '@angular/core';
import { map, Observable } from 'rxjs';
import {
  ActivatedRouteSnapshot,
  CanActivateChildFn,
  CanActivateFn,
  Router,
  RouterStateSnapshot,
  UrlTree,
} from '@angular/router';
import { AuthDataService } from './authDataService';

@Injectable({ providedIn: 'root' })
export class AuthGuard {
  static authGuardFn: CanActivateFn = (
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> => {
    const router = inject(Router);
    const authService = inject(AuthDataService);

    return authService.authSubStatus.pipe(
      map((status) => {
        if (status) return true;
        return router.createUrlTree(['/user']);
      })
    );
  };
}

AuthDataService代码 #

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { User } from '../Model/userModel';
import { Subject, tap } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthDataService {
  authenticated = false;

  authSubStatus = new Subject<boolean>();

  constructor(private http: HttpClient) {}

  testService() {
    console.log(this);
  }

  // LOG-IN 向后台发送基础认证数据
  postBasicAuthData(username: string, password: string) {
    console.log(username, password);

    const header = new HttpHeaders();

    const authHeader = header.set(
      'Authorization',
      'Basic ' + window.btoa(username + ':' + password)
    );

    return this.http
      .get<any>('http://localhost:8080/login/LoginUser', {
        headers: authHeader,
        observe: 'response',
        withCredentials: true,
      })
      .pipe(
        tap((responseData) => {
          if (responseData) {
            this.authenticated = true;
            this.authSubStatus.next(this.authenticated);
          }
        })
      );
  }

  // SIGN-UP 注册新用户
  newUserDetailsPost(
    username: string,
    password: string,
    age: number,
    email: string
  ) {
    console.log(username, password, age, email);

    return this.http.post<any>('http://localhost:8080/Sign-up/signup-user', {
      name: username,
      password: password,
      age: age,
      email: email,
    });
  }
}

路由配置（app.routes）代码 #

import { Routes } from '@angular/router';
import { LoginSignupComponent } from './login-signup/login-signup.component';
import { SuccessComponent } from './success/success.component';
import { AuthGuard } from './Service/authGuardService';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'user',
    pathMatch: 'full',
  },
  {
    path: 'user',
    component: LoginSignupComponent,
    // 懒加载登录注册子路由
    loadChildren: () =>
      import('./login-signup/login-logout.routes').then(
        (mode) => mode.LOGIN_LOGOUT_ROUTS
      ),
  },
  {
    path: 'welcome',
    component: SuccessComponent,
    canActivate: [AuthGuard.authGuardFn],
  },
];

问题根源 #

Subject属于冷Observable，只有在有订阅者之后发送的事件才会被接收。当页面刷新或首次访问/welcome路由时，authSubStatus从未发出过值，导致Guard的Observable一直处于等待状态，无法触发重定向逻辑。

修复步骤 #

1. 将Subject替换为BehaviorSubject
   BehaviorSubject会保存当前最新值，新订阅者会立即收到当前值，解决首次订阅无数据的问题。修改AuthDataService：

   // 先导入BehaviorSubject
   import { BehaviorSubject, tap } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class AuthDataService {
     authenticated = false;
     // 用BehaviorSubject初始化，传入初始值this.authenticated
     authSubStatus = new BehaviorSubject<boolean>(this.authenticated);
   
     // 其余代码不变...
   }
   

2. 初始化时恢复登录状态（可选但建议）
   页面刷新后，内存中的authenticated会重置为false，需要从本地存储或Cookie中恢复登录状态，确保Guard能获取正确的初始值。在AuthDataService的构造函数中添加：

   constructor(private http: HttpClient) {
     // 根据实际业务逻辑判断登录状态，比如检查认证Cookie
     const savedAuthStatus = this.checkAuthFromCookie(); // 自定义方法
     this.authenticated = savedAuthStatus;
     this.authSubStatus.next(this.authenticated);
   }
   
   // 示例：检查Cookie中的认证状态
   private checkAuthFromCookie(): boolean {
     // 这里替换为你的实际判断逻辑
     return document.cookie.includes('auth_token');
   }
   

3. 添加take(1)避免内存泄漏（可选）
   在Guard的Observable管道中添加take(1)，确保Guard获取到一次值后就完成Observable，避免不必要的订阅持续存在：

   // 先导入take
   import { map, take, Observable } from 'rxjs';
   
   return authService.authSubStatus.pipe(
     take(1), // 只取一次值
     map((status) => {
       if (status) return true;
       return router.createUrlTree(['/user']);
     })
   );
   

验证效果 #

修改完成后：

• 未登录状态下访问/welcome，Guard会立即收到BehaviorSubject的初始值false，触发重定向到/user；
• 用户登录后，authSubStatus.next(true)会触发Guard的逻辑，正常放行到welcome页面；
• 页面刷新后，登录状态会从Cookie/本地存储恢复，Guard能正确判断状态。

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