Angular 5 Добавьте Token в заголовок перед публикацией с httpClient

Question

Я использую restapi, и мне требуется добавить токен в заголовок, прежде чем я смогу создать новую запись.

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

service.ts

create(title, text) {
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    headers = headers.append('Authorization', token); // Not added yet as this is the reason for the question
    return this.http.post('http://myapi/api.php/posts', {
      title: 'added title',
      text: 'added text'
    }, { headers });
  }

app.component.ts

add() {
    this.service.create('my title', 'body text').subscribe(result => {
      console.log(result);
    });
  }

Проблема в том, что он не позволяет мне добавить новую запись, потому что для этого требуется токен, и для получения токена мне нужно запустить это:

getToken() {
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    return this.http.post('http://myapi/api.php/user', {
      username: 'admin',
      password: 'password'
    }, { headers });
  }

У меня вопрос ... Как мне объединить эти два в один вызов вместо двух ... или когда это лучший способ сделать это?

Answer 1

Помимо того, что @Pardeep Jain уже упомянул, вы можете добавить перехватчик (> Angular версия 4, вы упомянули, что вы используете 5) для вашего HttpClient, который автоматически добавит заголовки авторизации для всех запросов.

Если вам нужно пройти проверку подлинности только для одного запроса, лучше упростить задачу и использовать решение Pardeep.

Если вы хотите пройти проверку подлинности для большинства ваших запросов, добавьте перехватчик.

модуль, скажем app.module.ts

@NgModule({
 //...
 providers: [
    //...
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true
    },
    //...
    ]
//...
})

и ваш JWT-перехватчик, скажем, jwt.interceptor.ts

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  constructor(private injector: Injector, private router: Router) {
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {  
    const authReq = req.clone({
      headers: req.headers.set('Authorization', /* here you fetch your jwt */this.getToken())
        .append('Access-Control-Allow-Origin', '*')
    }); 
    return next.handle(authReq).do((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // do stuff with response if you want
      }
    }, (response: HttpErrorResponse) => { });
  }

  getToken() {
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    return this.http.post('http://myapi/api.php/user', {
      username: 'admin',
      password: 'password'
    }, { headers });
  }
}

Если вы хотите что-то прочитать, больше здесь: https://medium.com/@ryanchenkie_40935/angular-authentication-using-the-http-client-and-http-interceptors-2f9d1540eb8

Answer 2

Мой вопрос ... Как мне вместо этого объединить эти два в один вызов? из двух ... или когда это лучший способ сделать это?

Вы не должны.
Аутентификация - это то, что нужно выполнить один раз для клиента или по истечении срока действия билета аутентификации.
Публикация некоторого контента - это еще одна вещь, которую вы не должны смешивать с аутентификацией.

Так что аутентифицируйте клиента один раз и сохраните билет.
Затем передайте тикет в заголовке для любого запроса к защищенным конечным точкам / методам. Или используйте поперечный путь в качестве перехватчика, чтобы установить его в запросах на отправку, если вы не хотите повторять код.

Answer 3

Код должен быть таким -

create(title, text) {
    let headers: HttpHeaders = new HttpHeaders();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    headers.append('Authorization', token);
    return this.http.post('http://myapi/api.php/posts', {
      title: 'added title',
      text: 'added text'
    }, { headers });
  }