Angular解码JWT Token报错：No overload matches this call 求助

问题描述 #

我采用NestJS作为后端，向Angular应用传递JWT Token。已完成登录功能，前端可获取JWT Token，但解码Token提取userid时触发如下类型错误：

No overload matches this call.
Overload 1 of 3, '(token: string): any', gave the following error.
Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.
Overload 2 of 3, '(token: Promise): Promise', gave the following error.
Argument of type 'string | null' is not assignable to type 'Promise'.
Type 'null' is not assignable to type 'Promise'.

我希望在组件中调用authentication.service.ts里的getUserID()方法，但出现上述错误，完整代码如下：

authentication.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { JwtHelperService } from '@auth0/angular-jwt';

export interface LoginForm {
  username: string;
  password: string;
}

export const JWT_NAME = 'token';

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {

  constructor(private http: HttpClient, private jwtHelper: JwtHelperService) { }

  login(loginForm: LoginForm){
    return this.http.post<any>(`http://localhost:3000/login`, {username: loginForm.username, password: loginForm.password}).pipe(
      map((token) => {
        console.log('token')
        localStorage.setItem(JWT_NAME, token.access_token);
        return token
      })
    )
  }

  isAuthenticated(): boolean {
    const token = localStorage.getItem(JWT_NAME);
    return !this.jwtHelper.isTokenExpired(token);
  }

  getUserID() {
    const token = localStorage.getItem(JWT_NAME)
    return this.jwtHelper.decodeToken(token)
  }
}

问题原因 #

localStorage.getItem()返回的类型是string | null，而jwtHelper.decodeToken()仅接受string类型参数，当Token不存在（返回null）时，就会触发类型不匹配错误。

解决方法 #

1. 基础修复：添加Token存在性判断 #

修改getUserID()方法，先检查Token是否存在，再执行解码操作：

getUserID(): string | null {
  const token = localStorage.getItem(JWT_NAME);
  // 先判断Token是否存在
  if (!token) {
    return null;
  }
  // 解码Token并提取userid（注意：此处userId需和JWT载荷中的实际字段名一致，可根据自己的Token调整）
  const decodedToken = this.jwtHelper.decodeToken(token);
  return decodedToken?.userId || null;
}

2. 进阶优化：添加类型定义增强安全性 #

给JWT载荷定义接口，让解码操作具备类型提示：

// 定义JWT载荷的类型接口
interface JwtPayload {
  userId: string;
  // 可添加其他需要的字段，比如exp（过期时间）、username等
}

getUserID(): string | null {
  const token = localStorage.getItem(JWT_NAME);
  if (!token) {
    return null;
  }
  // 用泛型指定解码后的类型
  const decodedToken = this.jwtHelper.decodeToken<JwtPayload>(token);
  return decodedToken?.userId || null;
}

3. 组件调用时的边界处理 #

在组件中调用方法时，需处理返回值为null的情况，避免后续逻辑出错：

// 组件内调用示例
userId = this.authService.getUserID();

if (this.userId) {
  // 执行需要userid的业务逻辑
} else {
  // 处理未登录或Token无效的场景，比如跳转登录页
  this.router.navigate(['/login']);
}

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