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

Posted 2023-03-10

【中文标题】如何在 api 请求标头中插入 api 身份验证所需的 jwt 令牌？

【英文标题】：How can I insert jwt token needed for api authentication in api request header?

【发布时间】：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 那样指定一个标头，而不是在请求中包含它呢？

【参考方案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