尽管令牌已正确加载，但出现未经授权的错误

Question

我更新了我的 Angular 6 应用程序，以便它使用 auth0/angular2-jwt 库。在我现在更新我的服务后，我从我的 API 收到一个 401 Unauthorized 错误，尽管一个令牌正确地附加到 header。

Any requests sent using Angular's HttpClient will automatically have a token attached as an Authorization header.

据我正确理解，我不需要在任何时候想要发出请求时加载我的令牌，而不需要将其附加到 headers，因为它会自动加载。这是我的代码：

app.module.ts

import { JwtModule } from '@auth0/angular-jwt';
import { HttpClientModule } from '@angular/common/http';

imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: () => {
          return localStorage.getItem('id_token');
        },
        throwNoTokenError: true,
        whitelistedDomains: ['localhost:3000'],
      }
    }),

auth.service.ts

import { HttpClient } from '@angular/common/http';

  constructor(
    public http: HttpClient
  ) {}

  getProfile() {
    return this.http.get<profile>('http://localhost:3000/users/profile');
  }

如果我将 Postman 与我的 localStorage 中的令牌一起使用，一切正常，并且我得到了正确的配置文件数据。如果我使用我的 Angular-App 它不起作用。

Answer 1

试试这个。

import {HttpClient, HttpHeaders} from '@angular/common/http';

return this.http
  .get('http://localhost:3000/users/profile', {
    headers: new HttpHeaders().set('Authorization', `Bearer ${this.localStorage.getItem('id_token')}`)
  });

尽管令牌已正确加载，但出现未经授权的错误

Unauthorized error although token is loaded correctly

auth0

angular2-jwt

angular