Question

我获得了令牌，并以

的形式存储在“ this.token”中

this.token = Venktoken;      
console.log(this.token);

当我尝试在标头部分传递令牌值时，没有得到任何结果。我累得要过去，

{headers: new HttpHeaders({
'Authorization': 'bearer '+ this.token,

如何在标头部分传递令牌

Answer 1

尝试这样：

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

let header = new HttpHeaders().set("Authorization", 'Bearer ' + this.token);

return this.http.post(this.api_url,null, header);

要设置多个标头，请尝试如下操作：

let headers = new HttpHeaders()
    .set('Authorization', 'Bearer ' + this.token)
    .set('Content-Type', 'application/json')
    .set('InstanceName', 'ORISSA');

return this.http.post(this.api_url,null, headers );

Answer 2

关于在Angular中处理Authentication标头的最佳方法> 4，最好使用 Http拦截器，用于将它们添加到每个请求，然后使用保护您的路线的警卫。

这是我在应用程序中使用的AuthInterceptor的完整示例：

auth.interceptor.ts

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

import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        'Authorization': `Bearer ${AuthService.getToken()}`,
      },
    });
    return next.handle(req);
  }
}

您需要在app.module中将拦截器注册为提供程序：

app.module.ts

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { AuthInterceptor } from '../auth/auth.interceptor';

...

imports: [
    HttpClientModule,
    ...
],
providers: [
    {
      provide : HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi   : true,
    },
    ...
],

...

访问https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

关于围棋方面，这很可能是两人之间不匹配的情况您要发送的请求标头以及CORS允许的标头。您应该尝试的第一件事就是允许所有人：

headersOk := handlers.AllowedHeaders([]string{"*"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

如果问题消失了，请尝试根据客户发送的内容仔细构造您的CORS。

Answer 3

作为替代方法，您可以尝试使用此库angular-jwt，它提供了开箱即用的HttpInterceptor，可自动将令牌附加到HttpClient请求。

此外，它在JwtHelperService中有很多内置助手，例如isTokenExpired，decodeToken等。您可以将其设置为模块：

JwtModule.forRoot({
  config: {
    // ...
    headerName: 'Authorization',
    tokenGetter: () => {
      return localStorage.getItem('access_token');
    }
  }
});

上面的示例使用localStorage，但是您可以存储令牌根据您的确切用例在客户端上的任何位置。

Answer 4

简短回答

    let headers = new HttpHeaders()
          .set('Authorization', 'Bearer ' + token)
          .set('Content-Type', 'application/json'); 

    this.http.put(`${url}`, null, { headers });

    this.http.get(`${url}`, { headers });

    this.http.delete(`${url}`, { headers });

更多详细信息（我如何发现）？

当您将鼠标悬停在该功能上时，您会发现headers下的options不是直接在对象下。

标题的类型可以为HttpHeaders或 字符串 。我更喜欢使用向您展示的HttpHeaders。

如何在角度的授权字段的标题部分中传递令牌

4 个答案: