如何在 api 请求标头中插入 api 身份验证所需的 jwt 令牌？答案

【问题标题】：How can I insert jwt token needed for api authentication in api request header?如何在 api 请求标头中插入 api 身份验证所需的 jwt 令牌？
【发布时间】：2021-10-17 06:59:50
【问题描述】：

我想访问在数据库中发布一些数据的 api。对于 api 身份验证，我使用的是 jwt 令牌。我在将 jwt 令牌放入请求的标头时遇到问题。

我正在使用 aws api，它调用了一个可以访问我的数据库的 lambda 函数，以及前端的 angular。

我的语言代码是：

const request = {
      "header": new HttpHeaders({
        'Authorization': 'Bearer '+myVariables.jwt,

      }),

      "body": {
        ... //body part works
      }
    }

this.http.post(this.postBlogUrl, request).subscribe(
      res => {console.log("data posted to api"); window.location.reload();},
      err => {console.log("Error occured: " + err.message);}
    );

myVariable.jwt 是一个导出的变量，我在其中保存已签名的用户登录时的 jwt 令牌。

this.postBlogUrl 是我的 api 的 url 链接

还有一个奇怪的部分是，当我尝试 console.log(request.header) 时，我看不到授权字段 console.log(request.header);给我：console.log result

当我在 POSTMAN 中尝试相同的操作并在“标头”部分而不是在请求对象中指定标头授权时，它可以完美运行。那么我怎样才能在我的 Angular 应用中做同样的事情呢？

那么我怎样才能像邮递员https://imgur.com/a/Qk7P7D3 那样指定一个标头，而不是在请求中包含它呢？

【问题讨论】：

标签： angular amazon-web-services api http jwt

【解决方案1】：

你应该使用 HttpInterceptor

将中间件添加到http处理链的角度方式是HttpInterceptor。

你基本上写了一个带有intercept()方法的类：

@Injectable()
export class HeadersInterceptor implements HttpInterceptor {
  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const headers = req.headers.append('Authorization', myData);
    return next.handle(req.clone({ headers }));
  }

然后您使用HTTP_INTERCEPTORS 注入令牌注入它。

【讨论】：

非常感谢！这非常有效！感谢您向我推荐 httpinterceptors。一种帮助我理解拦截器的资源：@987654323@

【解决方案2】：

我认为您只是拼写错误 header 而不是 headers

【讨论】：