Как передать токен в разделе заголовка в поле авторизации в angular - PullRequest
Новая
       15

Как передать токен в разделе заголовка в поле авторизации в angular

0 голосов
/ 03 марта 2020

Я получил токен и сохранил в «this.token» как 

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

Когда я попытался передать значения токена в разделе заголовка, я не получил никаких результатов. Я устал, чтобы передать, как, 

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

Как передать токен в разделе заголовка

Ответы [ 3 ]

0 голосов
/ 03 марта 2020

Относительно лучшего способа обработки заголовков аутентификации в Angular> 4, лучше использовать перехватчики Http для добавления их к каждому запросу, а затем использовать Guards для защиты ваших маршрутов.

Вот полный пример 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

Что касается стороны Go, это, скорее всего, случай несоответствия между заголовками запросов, которые вы Отправляешь и заголовки CORS позволяют. Первое, что вы должны попробовать, это разрешить все из них: 

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

И если проблема исчезнет, ​​попробуйте тщательно структурировать CORS один за другим в соответствии с тем, что отправляет ваш клиент.

0 голосов
/ 04 марта 2020

В качестве альтернативного метода вы можете попробовать использовать эту библиотеку angular -jwt Она предоставляет HttpInterceptor из коробки, которая автоматически присоединяет токен к HttpClient запросам.

Также имеется множество встроенных помощников, таких как isTokenExpired, decodeToken, et c в JwtHelperService . Вы можете настроить его как модуль: 

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

В приведенном выше примере используется localStorage , но вы можете хранить токен в любом месте на клиенте в зависимости от вашего конкретного варианта использования.

0 голосов
/ 03 марта 2020

Попробуйте так:

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 );
...