如何在 Angular 8 中为发布请求获取响应标头

Question

如何在 Angular 8 中为发布请求获取响应标头并将 jwt 令牌存储在本地存储中

login(req): Observable<any> {
  return this.http.post(this.apiUrl + '/login', req).pipe(
    map(res => {
      if (res) {
        this.loggedIn.next(true);

      }
      return res;
    })
  );
}

Answer 1

loadToken() {
    const token = localStorage.getItem('token');
    this.authToken = token;
  }

createAuthHeader() {
    this.loadToken();
    const headers = new HttpHeaders().set(
      'Authorization',
      `Bearer ${this.authToken}`
    );
    return { headers };
  }

login(formData) {
    return this.http.post(`${this.url}/login`, formData,this.createAuthHeader());
  }

您需要将标头作为 post req 中的第三个参数传递。 参考这个例子。

Answer 2

要查看请求的响应标头，您需要在请求中使用observe: 'response' 选项：

return this.http.post(this.apiUrl + '/login', req, { observe: 'response'}).pipe(
  map((response) => {
    const data = response.data; // the data returned from your request
    const keys = response.headers.keys(); // keys of the response headers
    const headers = keys.map((key) => response.headers.get(key)); // values of the response headers

    // So to get the token, you need to do
    const JWTtoken = response.header.get('JWT-TOKEN');

    // To store you do:
    localStorage.set('JWT-TOKEN', JWTtoken);

    return data;
  });
);