Блог

У меня есть служба angular, которая запускает другой запрос rest к серверной системе. Я хочу добавить аутентификацию на основе auth0 к заголовку http, который определяется константой перед определением класса.

Обслуживание

 const ZUORA_URL = 'https://jangoepelapitest.azure-api.net/gocsso';
const headers = new HttpHeaders({
  'Access-Control-Allow-Origin': '*',
  'Authorization': 'Bearer ***TOKEN***',
  'Content-Type': 'application/json'
});

@Injectable({
  providedIn: 'root'
})
export class ZuoraService {
  constructor(private http: HttpClient) {}

  // INVOICES
  getInvoice(id: String): Observable<any> {
    return this.http.get(ZUORA_URL   '/v1/invoices/'   id   '/files', {
      headers
    });
  }

  reverseInvoice(id: String): Observable<any> {
    console.log('Invoice reversed');
    return this.http.put(ZUORA_URL   '/v1/invoices/'   id   '/reverse', {
      'applyEffectiveDate': '2017-02-20',
      'memoDate': '2017-02-20'
    }, {
      headers
    });
  }
...
}
  

Генерация токена auth0 отлично работает для тестирования, я добавил следующий код в центральный компонент приложения:

КОМПОНЕНТ ПРИЛОЖЕНИЯ

   constructor(public auth: AuthService) {
    auth.handleAuthentication();
  }
  ngOnInit() {
    console.log('AppComponent: OnInit()');
    if (localStorage.getItem('isLoggedIn') === 'true') {
      this.auth.renewTokens();
    }
  }
  

Когда я добавил сгенерированный токен в заголовок (скопируйте / вставьте), авторизация работает нормально. Как добавить сгенерированный токен в структуру заголовка в сервисе?

приветствую Malte

Создайте службу для HTTP-перехватчика:

 @Injectable()
export class TokenInterceptor implements HttpInterceptor {

  constructor(public auth: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const headers = new HttpHeaders({
    'Access-Control-Allow-Origin': '*',
    'Authorization': 'Bearer ***TOKEN***',
    'Content-Type': 'application/json'
    });

    request = request.clone({
      setHeaders: {
        headers
      }
    });

    return next.handle(request);
  }
}
  

Получите токен из вашей службы OAuth и установите его в указанном выше классе, headers authorization.

И добавьте перехватчик к вашему провайдеру в app.module.ts :

 @NgModule({
  bootstrap: [AppComponent],
  imports: [...],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}
  

Это отправляет токен с каждым HTTP-запросом.

Вы могли бы использовать HttpInterceptor, он перехватит запрос перед его отправкой, и вы можете установить заголовок для вашего токена-носителя: https://angular.io/api/common/http/HttpInterceptor

И вы можете получить свой токен из службы или непосредственно из файлов cookie или локального хранилища.