Angular Guards的canActivate方法为何始终返回false？

实现基础登录后认证功能时遇到异常：canActivate方法触发时机正确，但始终返回false。控制台先输出“First”，再输出“SECOND - canActivate”，说明登录成功回调已执行，但hasToken()方法始终返回false。

现有代码 #

Login Component代码 #

private login() {
  this.authService.login(this.loginForm.valid)
  .subscribe((data: any) => { // no need for pipe and map
    console.log("First");
    this.router.navigate(['/app']);
  })
}

AuthService代码 #

login({ username, password }: any): Observable<any>{
    this.clearData();

    const loginData = {
      'username': username,
      'password': password
    };

    return this.http.post(environment['baseURL'] + '/api/auth/login', loginData).pipe(
      map(
        (data: any) => {
          if (data['token'] && data['user']) {
            this.isLoggedIn.next(true); 
            this.token = data['token'];
            localStorage.setItem('token', this.token);
            localStorage.setItem('usermeta', JSON.stringify(this.userData));
            return true;
          } else {
            return false;
          }
        },
        (error: any)=>{
          return of(false)
        }
      )
      
    )
  }

  getToken(): string {
    return this.token;
  }

  hasToken() {
    return this.getToken() ? true : false;
  }

AuthGuard代码 #

constructor(
    private router: Router,
    private authService: AuthService,) {
    console.log("SECOND - canActivate") // 登录成功后会打印此内容
  }

 canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    console.log(this.authService.hasToken(), ">> this.authService.hasToken() <<")
    if (this.authService.hasToken()) {
      return true;
    } else {
      // 未登录则重定向到登录页，携带返回地址
      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
      return false;
    }
  }

问题分析与修复方案 #

核心问题点 #

1. Login组件传参错误：调用login方法时传递的是this.loginForm.valid（布尔值），但AuthService的login方法期望接收包含username和password的对象，导致后端无法收到正确的登录参数，token无法正常赋值。
2. 错误处理逻辑错误：map操作符的第二个参数不是错误回调，无法正确处理HTTP请求错误，需改用catchError。
3. Token未初始化同步：AuthService未在构造函数中从localStorage加载已存储的token到内存变量，导致Guard检查时内存中的token为空。
4. UserData未赋值：登录成功后未给this.userData赋值就存入localStorage，属于无效操作。

修正后的代码 #

修正Login Component的login方法

private login() {
  // 先校验表单有效性，再传递表单值
  if (this.loginForm.valid) {
    this.authService.login(this.loginForm.value)
      .subscribe((data: any) => {
        console.log("First");
        this.router.navigate(['/app']);
      });
  }
}

修正AuthService

import { catchError, map } from 'rxjs/operators';
import { of } from 'rxjs';

// 构造函数中初始化token，同步localStorage中的值
constructor(private http: HttpClient) {
  this.token = localStorage.getItem('token') || '';
}

login({ username, password }: any): Observable<boolean>{
  this.clearData();

  const loginData = {
    'username': username,
    'password': password
  };

  return this.http.post(environment['baseURL'] + '/api/auth/login', loginData).pipe(
    map((data: any) => {
      if (data['token'] && data['user']) {
        this.isLoggedIn.next(true); 
        this.token = data['token'];
        this.userData = data['user']; // 赋值userData
        localStorage.setItem('token', this.token);
        localStorage.setItem('usermeta', JSON.stringify(this.userData));
        return true;
      } else {
        return false;
      }
    }),
    // 改用catchError处理HTTP错误
    catchError((error: any) => {
      this.clearData();
      return of(false);
    })
  );
}

getToken(): string {
  return this.token;
}

hasToken(): boolean {
  // 同时检查内存和localStorage，避免同步问题
  return !!this.getToken() || !!localStorage.getItem('token');
}

优化AuthGuard的canActivate方法

canActivate(
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot): Observable<boolean | UrlTree> | boolean | UrlTree {
  const hasValidToken = this.authService.hasToken();
  console.log(hasValidToken, ">> this.authService.hasToken() <<");
  
  if (hasValidToken) {
    return true;
  } else {
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
}

总结 #

• 确保登录时传递正确的表单数据，后端才能返回有效token
• 修正错误处理逻辑，避免错误场景下token状态异常
• 初始化时同步localStorage的token到内存，保证Guard能读取到已存储的token
• 增强hasToken方法的鲁棒性，同时检查内存和本地存储

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