Angular 5中如何在请求头设置X-Auth-Token？新手求助

嘿，作为Angular新手遇到这种请求头配置的问题太正常啦，我来帮你排查下～

首先看你代码里的核心问题：你在设置请求头时用了JSON.stringify(sessionStorage.getItem('token'))，但sessionStorage.getItem('token')本身就已经是字符串类型了，JSON.stringify会把它额外包裹一层双引号。比如原本有效的token是abc123，经过处理后就变成了"abc123"，后端识别时会认为这是无效格式的token，这大概率就是你遇到问题的根源。

快速修正方案 #

直接去掉JSON.stringify，同时加个兜底处理防止token不存在时传入null：

public opt = { 
  headers: new HttpHeaders().set('x-auth-token', sessionStorage.getItem('token') || '') 
}

更规范的进阶方案：使用HTTP拦截器 #

如果后续有多个接口都需要携带这个token，手动给每个接口配置请求头会很繁琐，Angular的HttpInterceptor可以帮你统一处理所有请求的请求头：

1. 创建一个认证拦截器文件（比如auth.interceptor.ts）：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 从会话存储中获取token
    const token = sessionStorage.getItem('token');
    if (token) {
      // 克隆请求并添加请求头
      request = request.clone({
        setHeaders: {
          'x-auth-token': token
        }
      });
    }
    // 继续处理请求
    return next.handle(request);
  }
}

2. 在app.module.ts中注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor'; // 替换成你的文件路径

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的模块 */],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许多个拦截器存在
    }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

这样配置后，所有的HTTP请求都会自动带上x-auth-token请求头，不用再每个接口手动写opt对象啦～

最后别忘了检查下sessionStorage里的token是否正确：打开浏览器控制台，输入sessionStorage.getItem('token')，确认返回的是你从API拿到的sId值，排除存储环节的问题。

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