Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Authorization - Token

Referente ao curso Angular parte 2: Autenticação, Forms e lazy loading, no capítulo Autenticação e o papel do token e atividade Acesso do header de resposta

por Gedan Magalhães
| 136.2k xp | 52 posts
Desenvolvedor

Pessoal, notei que na aula já recebemos o token já no cabeçalho da aplicação, mas na minha api está retornando no body, então estou pegando o valor recebido e setando no meu header. 

  composeHeaders() {
    const token = Security.getToken();
    const headers = new HttpHeaders().set('Authorization', `bearer ${token}`);
    return headers;
  }

e no meu método de autenticação, eu chamo o composeHeaders:

  authenticate({ username, password }) {
    return this.http.post(environment.apiUrl.concat('Authentication/Login'), { username, password }, { observe: 'response' })
      .pipe(tap(
        (res: any) => {
          const token = res.body.token;
          Security.setToken(token);
          console.log(`Usuario ${res.body.user.username} autenticado com o token ${token}`);
          this.composeHeaders();
        }));
  }

Mas este token não está sendo enviado nas minhas requisições e sempre retorna como não autorizado. Como devo incluir o token no header nas minhas requisições?

1 resposta
solução!
por Gedan Magalhães
| 136.2k xp | 52 posts
Desenvolvedor

Adicionei um interceptor das requisições pra adicionar o header erm todas as requisições, segue:

import { Security } from './../../utils/security.utils';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {

  constructor() { }

  intercept(
    request: HttpRequest<any>,
    next: HttpHandler, ): Observable<HttpEvent<any>> {
    const dupReq = request.clone({
      headers: request.headers.set('Authorization', `bearer ${Security.getToken()}`)
    });
    return next.handle(dupReq);
  }
}

e ono meu app.module.ts, adicionei no provider o interceptor da seguinte forma:


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