Angular12下authService.decodedToken无法解码JWT令牌如何解决

• @auth0/angular-jwt版本兼容性问题：Angular12配套的@auth0/angular-jwt v5+版本调整了JWT解析逻辑，旧版本默认会把JWT的nameid声明映射为同名属性，新版本默认声明字段可能改为JWT标准的sub字段，或未显式指定声明前缀导致取不到值。
• decodedToken未持久化还原：当前decodedToken仅在login方法执行时赋值，用户刷新页面后AuthService实例重置，decodedToken会变成undefined，Resolver执行时自然取不到nameid属性。低版本Angular可能因服务实例缓存或路由执行时序问题未触发该bug，升级后路由Resolver执行时机提前，问题暴露。
• 严格模式空值校验拦截：Angular12默认开启严格类型校验，loggedIn方法里的token!非空断言如果实际token为null，后续解码操作会直接抛出异常。

第一步：调整AuthService的token解码逻辑，新增初始化还原逻辑 #

在AuthService构造函数中添加页面刷新后的token还原逻辑，避免实例重置后解码信息丢失：

// AuthService 构造函数新增代码
constructor(private jwtHelper: JwtHelperService) {
  // 页面加载时从本地存储还原身份信息
  const token = localStorage.getItem('token');
  const userStr = localStorage.getItem('user');
  if (token && userStr) {
    this.decodedToken = this.jwtHelper.decodeToken(token);
    this.currentUser = JSON.parse(userStr);
    this.changeMemberPhoto(this.currentUser.photoUrl);
  }
}

第二步：兼容JWT声明字段取值，避免取不到nameid #

修改Resolver内的用户ID取值逻辑，兼容不同版本的JWT字段命名：

// MemberEditResolver的resolve方法修改代码
resolve(route: ActivatedRouteSnapshot): Observable<User | any> {
  // 优先取nameid，取不到则取JWT标准用户ID字段sub
  const userId = this.authService.decodedToken?.nameid || this.authService.decodedToken?.sub;
  if (!userId) {
    this.alertify.error('用户身份信息失效，请重新登录');
    this.router.navigate(['/home']);
    return of(null);
  }
  return this.userService.getUser(userId).pipe(
    catchError(error => {
      this.alertify.error('Problem retrieving your data');
      this.router.navigate(['/home']);
      return of(null);
    })
  );
}

第三步：优化空值判断逻辑，避免非空断言异常 #

调整loggedIn方法的判断逻辑，移除不安全的非空断言：

loggedIn() {
  const token = localStorage.getItem('token');
  // 先判断token存在性，再校验有效期
  return token && !this.jwtHelper.isTokenExpired(token);
}

可选验证步骤 #

可在解码token后打印this.decodedToken确认实际字段名，如果输出结果中只有sub没有nameid，直接将所有用到nameid的地方替换为sub即可。

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