Angular登录组件http.post请求失败，报Invalid token specified错误

从你的报错栈和代码来看，这个InvalidTokenError是因为在调用jwt-decode时传入了无效的（或不存在的）token，而且这个错误发生在AuthGuard的初始化过程中，直接导致你的登录请求还没来得及发送就中断了。下面是具体的排查和解决步骤：

1. 定位错误根源 #

你的调用栈显示错误来自auth-guard.service.ts，说明在路由守卫逻辑里，你可能直接尝试解码一个不存在的token（比如用户还没登录，localStorage里没有access_token）。当jwt-decode接收到null/undefined或者格式错误的字符串时，就会抛出这个异常。

2. 修复AuthGuard的逻辑 #

首先，你需要在AuthGuard里先检查token是否存在，再进行解码或过期检查。假设你的AuthGuard代码类似下面这样，修改它：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    // 先从本地存储获取token
    const token = localStorage.getItem('access_token');
    
    // 先判断token是否存在，再检查是否过期
    if (!token || this.authService.jwtHelper.isTokenExpired(token)) {
      this.router.navigate(['/login']);
      return false;
    }
    
    return true;
  }
}

3. 完善AuthService的token存储逻辑 #

你的登录方法里只打印了token，但没有把它存储到本地，这会导致后续AuthGuard拿不到有效的token。修改AuthService的login方法，添加token存储：

public login (user: TokenPayload) {
  const base = this.http.post<any>(`//localhost:25000/auth/login`, {
    username: user.username,
    password: user.password
  },{ headers: new HttpHeaders().set('Content-Type', 'application/json') })

  const request = base.pipe(
    map((data : TokenResponse) => {
      console.log({data});
      if (data.access_token) {
        console.log(data.access_token);
        // 将token存入localStorage，供AuthGuard后续使用
        localStorage.setItem('access_token', data.access_token);
      }
      return data;
    })
  )
  return request;
}

4. 清理冗余依赖 #

注意到你在AuthService里同时导入了@auth0/angular-jwt的JwtHelperService和单独的jwt-decode包，但并没有使用后者。建议移除冗余的导入：

// 删掉这一行：
import decode from 'jwt-decode';

统一使用JwtHelperService来处理token的解码、过期检查等操作，避免依赖冲突。

5. 验证修复效果 #

做完以上修改后，重新启动应用：

• 未登录时，AuthGuard会检查到token不存在，直接跳转到登录页，不会再抛出InvalidTokenError；
• 输入账号密码登录后，token会被存入本地存储，后续路由守卫能正常验证token有效性；
• 登录请求也能正常发送到服务器了。

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