Angular AuthGuard直接访问受限路由时未拦截问题求助

直接在地址栏输入登录/注册URL时，路由守卫会先于AppComponent的ngOnInit执行，此时currentUser信号还处于初始的undefined状态，导致守卫误判用户未登录，允许访问受限页面。

核心思路是：让守卫等待用户状态初始化完成后再做判断，同时将用户状态的初始化逻辑从AppComponent移到AuthService内部（服务初始化时自动执行），确保路由守卫执行前用户状态已就绪。

1. 改造AuthService，提前初始化用户状态 #

修改auth.service.ts，在服务构造函数中自动检查token并加载用户信息，同时提供一个Observable供守卫订阅，等待状态就绪：

import { inject, Injectable, signal } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { catchError, filter, Observable, take, tap, throwError } from 'rxjs';

export type CurrentUser = { /* 你的用户类型定义 */ };

@Injectable({ providedIn: 'root' })
export class AuthService {
  private http = inject(HttpClient);
  currentUser = signal<CurrentUser | null | undefined>(undefined);
  
  // 创建一个Observable，只发出一次用户状态（跳过初始undefined）
  private userLoaded$ = this.currentUser.asObservable().pipe(
    filter(user => user !== undefined),
    take(1)
  );

  constructor() {
    // 服务初始化时自动处理用户状态
    const token = localStorage.getItem('accessToken');
    if (token) {
      this.getCurrentUser().subscribe({
        error: () => this.currentUser.set(null) // 请求失败（如token过期），设为null
      });
    } else {
      this.currentUser.set(null); // 无token直接设为null
    }
  }

  getCurrentUser(): Observable<CurrentUser> {
    return this.http.get<CurrentUser>(`${environment.API_URL}/auth/user`).pipe(
      tap(response => this.currentUser.set(response)),
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          localStorage.removeItem('accessToken');
          this.currentUser.set(null);
        }
        return throwError(() => error);
      })
    );
  }

  // 暴露给守卫的用户状态就绪Observable
  getUserLoaded$(): Observable<CurrentUser | null> {
    return this.userLoaded$;
  }
}

2. 改造AuthGuard，等待用户状态就绪后判断 #

修改auth.guard.ts，让它返回Observable，等待用户状态加载完成再做权限判断：

import { inject } from '@angular/core';
import { Router, CanActivateFn } from '@angular/router';
import { AuthService } from '../services/auth.service';
import { map } from 'rxjs';

export const authGuard: CanActivateFn = (_route, _state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  return authService.getUserLoaded$().pipe(
    map(user => {
      if (user) {
        // 用户已登录，跳转到首页
        router.navigateByUrl('/');
        return false;
      }
      // 用户未登录，允许访问登录/注册页
      return true;
    })
  );
};

3. 清理AppComponent的冗余代码 #

因为用户状态初始化逻辑已移到AuthService，所以可以删除app.component.ts中ngOnInit里的相关代码：

// 原ngOnInit代码可以完全删除
ngOnInit(): void {
  // 这部分代码已移到AuthService构造函数，无需保留
}

• 守卫现在会等待用户状态从undefined变为null（未登录）或用户对象（已登录），再执行判断逻辑，解决了地址栏直接访问时的时序问题。
• 处理了token无效的场景：如果getCurrentUser返回401，会自动清除token并设置用户状态为null，确保守卫能正确允许用户访问登录页重新登录。
• 服务初始化时就处理用户状态，避免依赖组件的生命周期，逻辑更可靠。

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