Angular 5：CanActivate需验证用户Token，如何让loggedIn()返回布尔值？

嘿，我来帮你搞定这个AuthService的loggedIn()函数问题～

首先得明确一个关键点：如果你的Token与用户匹配的验证需要调用后端接口（比如校验Token是否未被吊销、属于当前活跃用户），那这个操作是异步的，没办法直接返回同步的boolean，只能用Observable<boolean>或者Promise<boolean>来包裹结果。但如果是纯前端就能完成的验证（比如对比Token里的用户ID和本地存储的用户信息），那可以直接返回同步布尔值。

下面分两种场景给你具体实现：

这种场景适合你已经在本地存储了用户的基础标识（比如用户ID），只需要解析Token做两项检查：是否过期、Token里的用户信息和本地存储是否匹配。

首先你需要安装jwt-decode库来解析JWT的payload：

npm install jwt-decode

然后在AuthService里这样写：

import { Injectable } from '@angular/core';
import jwtDecode from 'jwt-decode';

// 定义JWT payload的结构，根据你的实际Token字段调整
interface JwtPayload {
  sub: string; // 假设用sub字段存储用户ID
  exp: number; // 过期时间的时间戳（单位：秒）
}

@Injectable({ providedIn: 'root' })
export class AuthService {
  private readonly TOKEN_STORAGE_KEY = 'auth_token';
  private readonly USER_ID_STORAGE_KEY = 'current_user_id';

  loggedIn(): boolean {
    const token = localStorage.getItem(this.TOKEN_STORAGE_KEY);
    // 本地没有Token，直接返回未登录
    if (!token) return false;

    try {
      const payload = jwtDecode<JwtPayload>(token);
      const currentTimeInSeconds = Math.floor(Date.now() / 1000);

      // 检查Token是否过期
      if (payload.exp < currentTimeInSeconds) {
        // 过期了就清理本地存储
        this.clearAuthData();
        return false;
      }

      // 检查Token里的用户ID和本地存储的是否匹配
      const storedUserId = localStorage.getItem(this.USER_ID_STORAGE_KEY);
      if (!storedUserId || payload.sub !== storedUserId) {
        return false;
      }

      // 所有校验通过，返回已登录
      return true;
    } catch (err) {
      // Token解析失败，说明无效，清理存储
      this.clearAuthData();
      return false;
    }
  }

  // 辅助方法：登录成功后存储Token和用户ID
  saveAuthData(token: string, userId: string): void {
    localStorage.setItem(this.TOKEN_STORAGE_KEY, token);
    localStorage.setItem(this.USER_ID_STORAGE_KEY, userId);
  }

  // 辅助方法：清理授权数据
  private clearAuthData(): void {
    localStorage.removeItem(this.TOKEN_STORAGE_KEY);
    localStorage.removeItem(this.USER_ID_STORAGE_KEY);
  }

  // 你的loadToken方法可以改成这样
  loadToken(): string | null {
    return localStorage.getItem(this.TOKEN_STORAGE_KEY);
  }
}

如果Token的有效性（比如是否属于当前用户、是否被吊销）必须由后端确认，那只能异步返回结果，这里用Angular的HttpClient来调用后端接口：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import jwtDecode from 'jwt-decode';

interface JwtPayload {
  exp: number;
}

@Injectable({ providedIn: 'root' })
export class AuthService {
  private readonly TOKEN_STORAGE_KEY = 'auth_token';

  constructor(private http: HttpClient) {}

  loggedIn(): Observable<boolean> {
    const token = localStorage.getItem(this.TOKEN_STORAGE_KEY);
    if (!token) return of(false);

    try {
      const payload = jwtDecode<JwtPayload>(token);
      const currentTimeInSeconds = Math.floor(Date.now() / 1000);

      // 先做前端过期检查，避免无效的后端请求
      if (payload.exp < currentTimeInSeconds) {
        this.clearAuthData();
        return of(false);
      }

      // 调用后端验证接口，这里假设后端返回{ valid: boolean }
      return this.http.get<{ valid: boolean }>('/api/auth/validate-token', {
        headers: { Authorization: `Bearer ${token}` }
      }).pipe(
        map(res => {
          if (!res.valid) {
            this.clearAuthData();
            return false;
          }
          return true;
        }),
        catchError(() => {
          // 请求失败或Token无效，清理存储
          this.clearAuthData();
          return of(false);
        })
      );
    } catch (err) {
      this.clearAuthData();
      return of(false);
    }
  }

  private clearAuthData(): void {
    localStorage.removeItem(this.TOKEN_STORAGE_KEY);
  }
}

关于异步返回的使用说明 #

因为后端请求是异步的，你需要在组件里订阅这个Observable来获取结果：

// 比如在组件的ngOnInit里
ngOnInit(): void {
  this.authService.loggedIn().subscribe(isLoggedIn => {
    if (isLoggedIn) {
      // 用户已登录，执行后续逻辑
    } else {
      // 未登录，跳转到登录页
      this.router.navigate(['/login']);
    }
  });
}

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