0

Minha aplicação JWT está com o seguinte código:

meu Model de user:

export class User {
    id: number;
    username: string;
    password: string;
    name: string;
    admin: boolean;
    token?: string;
}

O ts do Login é:

this.authenticationService.login(this.f.username.value, this.f.password.value, this.fingerprint, this.admin)
      .pipe(first())
      .subscribe(
        user => {
          this.router.navigate(['/']);
        },
        error => {
          this.error = error;
          this.loading = false;
        });
  }

Meu cabeçalho está assim:

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json;charset=UTF-8',
    'Accept-Language': '1'
  }),
};

A chamada do login está assim:

 login(username: string, password: string, fingerprint: string, admin: boolean) {
    return this.http.post<any>("http://site.com/url/login", { username, password, admin, fingerprint}, httpOptions)
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
              console.log("USER: " + user);

                if (user) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                    this.currentUserSubject.next(user);
                }

                return user;
            }));
    }

meu interceptador está assim:

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = this.authenticationService.currentUserValue;

        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: {
                  'Authorization': `Bearer ${currentUser.token}`,
                  'Accept-Language': '1'
                }
            });
        }

        return next.handle(request);
    }

Acessando a aba network. Ele faz a requisição e retorna normalmente 200 e o token aparece no header, mas quando eu tento usar o map para fazer o get da resposta, na aplicação ele está devolvendo null. Eu já testei vários métodos e continua como null.

Estou fazendo baseado no código jasonwatmore de jwt angular 7;

Abaixo é o retorno 200 e o token

inserir a descrição da imagem aqui

Alguém passou por isso já?

3 Respostas 3

1

Pelo que entendi, seu problema é conseguir acessar seu token JWT na resposta da sua chamada POST de login, certo?

Neste caso, para que funcione da maneira que espera, a implementação teria que ser semelhante a esta que coloquei abaixo.

O ts de login:

this.authenticationService.login(this.f.username.value, this.f.password.value, this.fingerprint, this.admin)
      .subscribe(
        user => {
          this.router.navigate(['/']);
        },
        error => {
          this.error = error;
          this.loading = false;
        });
  }

Cabeçalho:

   const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json;charset=UTF-8',
        'Accept-Language': '1'
      }),
      observe: 'response'
    };

Service de login:

    login(username: string, password: string, fingerprint: string, admin: boolean) {
        return this.http.post<any>("http://site.com/url/login", { username, password, admin, fingerprint}, httpOptions)
                .pipe(map(response => {
                  let user = {token: response.headers.Authorization}
                  // login successful if there's a jwt token in the response
                  console.log("USER: " + user);

                    if (user) {
                        // store user details and jwt token in local storage to keep user logged in between page refreshes
                        localStorage.setItem('currentUser', JSON.stringify(user));
                        this.currentUserSubject.next(user);
                    }

                    return user;
                }));
        }

Interceptador:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = this.authenticationService.currentUserValue;

        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: {
                  'Authorization': `${currentUser.token}`,
                  'Accept-Language': '1'
                }
            });
        }

        return next.handle(request);
    }
5
  • Opa, desse jeito ele retorna um [object Object] no console, mas nessa coleta ele não para passar ao interceptor ele da erro no: this.currentUserSubject.next(user); no service. o erro é: Argument of type '{ token: any; }' is not assignable to parameter of type 'User'. Type '{ token: any; }' is missing the following properties from type 'User': id, username, password, name, admin Commented 28/06/2019 às 20:03
  • Obs. no observe eu coloquei: observe: 'response' as 'body', só response ele dava um erro Commented 28/06/2019 às 20:06
  • Consegui imprimir o token com sua ajuda, mas fazendo dessa forma: .pipe(map((response: HttpResponse<any>) => { console.log("USER: " + response.headers.get('Authorization')); Agora preciso corrigir essa parte do this.currentUserSubject.next(user) Commented 28/06/2019 às 20:17
  • É só você modificar o model do User para aceitar uma propriedade token, e passar as demais propriedades obrigatórias para ele na criação no service de login. Qto ao observe: 'response' as 'body', deve funcionar também.
    – Dante
    Commented 28/06/2019 às 20:19
  • Opa! Vlw mano!! Deu certo aqui, me salvou! Commented 28/06/2019 às 20:30
0

Eu acho que não necessita passar um novo header na hora do POST, porque já estás definindo no interceptador, creio que possa estar sendo substituído e ficando sem o Token. Tenta fazer o post só passando a URL e o BODY.

1
  • O backend está mandando o token direto no header, no body ele não tem nada mesmo.. Mesmo sem mandar o httpOptions ele retorna o null Commented 28/06/2019 às 19:17
-1

A função de login está retornando uma requisição HTTP, como está a implementação da Subscription desse Observável? Para acessar a o cabeçalho da resposta, seria necessário adicionar a propriedade 'observe: "response"' no objeto httpOptions. Sendo assim, o seu user teria todas as informações da resposta do POST. Seria interessante postar mais detalhes do código e se possível, detalhes do contrato dessa chamada HTTP, possibilitando uma melhor compreensão do seu problema.

2
  • Olá, eu estou fazendo a chamada baseado no jasonwatmore.com/post/2018/10/29/… mas com o backend fake ele funciona, mas quando aponto para api, ele retorna 200 ok, mas não consigo fazer esse get. Commented 28/06/2019 às 18:24
  • Atualizei a pergunta com mais detalhes. Commented 28/06/2019 às 18:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .