Angular项目中如何提取LocalStorage中存储为对象的令牌，用于HTTP请求Authorization头部

看起来你遇到的核心问题有两个：一是LocalStorage中存储的是整个响应对象的JSON字符串，而非单独的Token值；二是拦截器中存在键名拼写错误，且未正确解析存储的对象。下面是分步修正方案：

1. 先确认登录接口的响应结构 #

首先查看你登录时console.log(data)的输出，确认Token在响应对象中的字段名（比如常见的token或access_token）。假设接口返回的结构类似这样：

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "user": { /* 用户信息 */ }
}

2. 修正登录组件的存储逻辑（可选但更合理） #

如果只需要Token，建议直接存储Token字符串而非整个对象，这样后续处理更简单：

// login.component.ts 中的login方法
login(newFormdata:any) {
  this.LoginService.login(newFormdata).subscribe((data) => {
    console.log(data)
    // 直接存储Token字段，而非整个对象
    localStorage.setItem("token", data.token); // 这里的data.token要和接口返回的字段名一致
    this.router.navigate(['facility-list'])
  })
}

如果需要保留完整的用户信息，可以将对象存储到另一个键名（比如user），避免和Token混淆：

localStorage.setItem("user", JSON.stringify(data));

3. 修正HTTP拦截器的代码 #

拦截器需要正确获取Token、处理空值、并正确拼接Authorization头，同时修正之前的键名拼写错误（你写的"'token"多了一个单引号）：

情况一：如果直接存储了Token字符串 #

export class AppinterceptorInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 修正键名，去掉多余的单引号
    const token = localStorage.getItem("token");
    let tokenizedRequest = request;
    
    // 只有当Token存在时才添加头部，避免空值导致的请求错误
    if (token) {
      tokenizedRequest = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }
    
    return next.handle(tokenizedRequest);
  }
}

情况二：如果存储了完整的用户对象 #

export class AppinterceptorInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const userStr = localStorage.getItem("user");
    let tokenizedRequest = request;
    
    if (userStr) {
      // 将JSON字符串解析为对象
      const user = JSON.parse(userStr);
      // 检查对象中是否存在Token字段（根据实际接口返回调整字段名）
      if (user.token) {
        tokenizedRequest = request.clone({
          setHeaders: {
            Authorization: `Bearer ${user.token}`
          }
        });
      }
    }
    
    return next.handle(tokenizedRequest);
  }
}

额外注意事项 #

• 确保登录接口返回的Token字段名和你代码中使用的一致（比如如果接口返回的是access_token，就要写成data.access_token）；
• 建议在拦截器中添加Token存在性判断，避免Token过期或未登录时发送无效的Authorization头；
• 后续可以考虑用Angular的BehaviorSubject来管理Token状态，比直接操作LocalStorage更灵活，也方便处理Token过期等场景。

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