在 Angular 中设置不记名 JWT 令牌

Question

我目前在控制台中收到 401 未经授权的错误，试图访问我构建的 API 端点，该端点受到保护。 我注意到我没有将不记名令牌添加到 header。

我注意到了这一点并添加了这个但是我仍然收到 401 错误，我做错了什么？ 我知道令牌是有效的，因为我在 Postman 中进行测试，并且在 Postman 中得到 200 响应代码，但在 Angular 中得到 401。

这是我的代码：

let token = localstorage.get('token');

  getCategories() : Observable<any> {
    let token = localStorage.getItem("token");

    const headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');
    headers.set('Authorization', `Bearer ${token}`);

    
    return this.http.get(this.CategoriesUrl, { headers: headers} )
  }

Answer 1

Set与Append - 使用 append。

append 方法将新值附加到 header 的现有值集并返回一个新实例。 append 方法不检查该值是否存在。

Sets 方法在修改给定的 header 后返回一个新实例。 如果 header 已经存在，则将其值替换为返回的 object 中的给定值。

 headers.append('Authorization', 'Bearer ' + token);

虽然我建议制作一个拦截器，为所有查询设置 header。

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

import { environment } from '@environments/environment';
import { AuthenticationService } from '@app/_services';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
            
            const token = localStorage.getItem("token");

            request = request.clone({
                setHeaders: {
                    Authorization: 'Bearer ' + token
                }
            });
        

        return next.handle(request);
    }
}

Answer 2

新的HttpHeader class 的实例是不可变对象。 调用 class 方法将返回一个新实例作为结果。 因此，您需要执行以下操作：

  let headers = new HttpHeaders();
  header = header.set('Auth', 'Bearer ' + token )