0

Boa tarde,

Gostaria de uma orientação de como eu poderia pegar o token que está sendo gerado no meu back-end (API NodeJS + Express + MongoDB) e salvar o mesmo no Authorization do Header quando o usuário fizer o login no sistema.

Vou colocar os códigos do NodeJS e da aplicação para tentar deixar claro os meus procedimentos:

A parte de autenticação e geração do Token no NodeJS está assim:

function generateToken(params = {}) {
return jwt.sign(params, authConfig.secret, {
    expiresIn: 86400, 
});
}

router.post('/authenticate', async (req, res) => { //Criando uma rota de autenticação.
const { email, senha } = req.body; //Recebendo o email e a senha do nosso corpo da requisição.
try {
    const user = await User.findOne({ email }).select('+senha'); //Faz uma verificação se o e-mail e senha existem no banco de dados.

    if (!user) { //Verifica se o usuário existe no banco de dados.
        return res.status(400).send({ error: 'Usuário não encontrado!' }); //Retorna um erro com uma mensagem.
    }

    if (!await bcrypt.compare(senha, user.senha)) { //Verifica se a senha informada é a mesma senha do cadastro do usuário.
        return res.status(400).send({ error: 'Senha inválida!' }); //Retorna um erro com uma mensagem.
    }

    user.senha = undefined; // Faz com que a senha não seja retornada com o seu valor para o usuário na sua criação.

    return res.send({ user, 
                      token: generateToken({ id: user.id })
                    });
} catch (err) {
    return res.status(401).send({ error: 'Erro ao logar usuário!' }); //Retorna um erro com uma mensagem.
}
});

A minha classe UsuarioService.ts que faz a chamada da rota acima do NodeJS está assim:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class UsuarioService {

 API_Login: string = "http://localhost:4000/auth/authenticate/";

 constructor(private http: HttpClient) { }

 authenticate(email: string, senha: string) {
   return this.http.post(this.API_Login, {email: email, senha: senha});
 }
}

No meu componente LoginPage.TS, que faz a chamada do UsuarioService.ts, o método de Login está assim:

loginUsuario() {

const email = this.loginForm.get('email').value;
const senha = this.loginForm.get('senha').value;

this.usuarioService.authenticate(email, senha)
                   .subscribe(()  => {
                     this.alertLoginSuccess();
                     this.loginForm.reset();
                     this.router.navigate(['/home']);
                   }, erro => {
                     console.log(erro);
                     this.alertLoginError();
                     this.loginForm.reset();
                   });
 }

O Login funciona corretamente, consigo logar no sistema usando o e-mail e a senha correta de algum usuário criado no banco de dados, porém, eu gostaria de uma orientação de como eu pego o valor do token que está sendo gerado no NodeJS caso o login do usuário foi um sucesso e armazenar o mesmo no Authorization Header, pois é através deste Header que o back-end faz uma verificação em busca do Token do usuário.

Qualquer informação complementar, por favor, estou a disposição!

Desde já, obrigado pela atenção!

1 Resposta 1

0

O subscribe retorna no primeiro callback, a resposta de sucesso da sua API basta alterar o seguinte trecho de código:

this.usuarioService.authenticate(email, senha)
               .subscribe((response)  => {

                 response.token //Acesso ao token retornado da sua API
                 response.user // Acesso ao usuario retornado da sua API

                 localStorage.setItem('token',response.token);
                 localStorage.setItem('user',JSON.stringfy(response.user))

                 this.alertLoginSuccess();
                 this.loginForm.reset();
                 this.router.navigate(['/home']);
               }, erro => {
                 console.log(erro);
                 this.alertLoginError();
                 this.loginForm.reset();
               });

Para armazenar o token e o usuário, vc pode utilizar o localstorage. Sendo assim, em outras requisições que necessitarem de uma autenticação, basta pegar o token e adiciona-lo ao header da sua requisição.

Você pode também, deixar essa lógica de adicionar o token e o usuário no localstorage direto na camada de serviços:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operator';

@Injectable({
  providedIn: 'root'
})

export class UsuarioService {

 API_Login: string = "http://localhost:4000/auth/authenticate/";

 constructor(private http: HttpClient) { }

 authenticate(email: string, senha: string) {
   return this.http.post(this.API_Login, {email: email, senha: senha});
 }.pipe( tap( response => {
     localStorage.setItem('token',response.token);
     localStorage.setItem('user',JSON.stringfy(response.user))
  ))
}
1
  • Obrigado pelas dicas Eduardo! Vou tentar dessa forma proposta por você! Commented 16/10/2019 às 16:05

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 .