Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Problema com autenticação JWT

Olá, estou aplicando o aprendizado do curso de MEAN e atualizando o mesmo com o Angular2. Para isso estou tento adicionar um serviço de autenticação com ele.

No momento estou recebendo o seguinte erro:

http://localhost:3000/api/auth/autenticar 401 (Unauthorized)

http://i.imgur.com/PuZ6Nwp.png

O arquivo ExtendedHttpService.ts em questão e o seguinte:

@Injectable()
export class HttpService extends Http {

  constructor (backend: XHRBackend, options: RequestOptions) {
    let token = localStorage.getItem('x-access-token'); // your custom token getter function here
    options.headers.set('x-access-token', `${token}`);
    super(backend, options);
  }

  request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    let token = localStorage.getItem('x-access-token');
    if (typeof url === 'string') { // meaning we have to add the token to the options, not in url
      if (!options) {
        // let's make option object
        options = {headers: new Headers()};
      }
      options.headers.set('x-access-token', `${token}`);
    } else {
    // we have to add the token to the url object
      url.headers.set('x-access-token', `${token}`);
    }
    return super.request(url, options).catch(this.catchAuthError(this));
  }

  private catchAuthError (self: HttpService) {
    // we have to pass HttpService's own instance here as `self`
    return (res: Response) => {
      console.log(res);
      if (res.status === 401 || res.status === 403) {
        // if not authenticated
        console.log(res);
      }
      return Observable.throw(res);
    };
  }
}

Então para tentar resolver o problema, eu verifiquei em que momento ocorre algum problema, o meu back-end esta da seguinte forma:

app.route('/api/auth/autenticar')
    .post(api.autentica);

/// api.autenticar

api.autentica = function(req, res) {

         model.findOne({
             login: req.body.login,
             senha: req.body.senha
         })
         .then(function(usuario) {
             if (!usuario) {
                 console.log('deu ruim aqui')
                 res.sendStatus(401);
             } else {
                 var token = jwt.sign( {login: usuario.login}, app.get('secret'), {
                     expiresIn: 86400
                 });
                 res.set('x-access-token', token);
                 res.end();
             }
         });
     };

aqui eu recebo o erro no if(!usuario), então acredito que o usuário não esta chegando ao realizar uma requisição.

Ja no meu front-end, eu tenho o seguinte serviço que chama essa rota da API:

logar(usuario: UsuarioComponent) {
    console.log('Meu usuário:' + usuario)
    return this.http.post(this.url, JSON.stringify(usuario))
      .map((res) => {       
        console.log('meu token:' + res.headers.get('x-access-token'))              
        var token = res.headers.get('x-access-token');
          if (token) {
            console.log('tem token')
            this._loggedIn.next(true);
            localStorage.setItem('token', token);
           }
        });
  }

Aqui eu aparece no log o usuário: [object Object] ou {"login":"asdasd","senha":"asdasd"} caso eu mande JSON.stringify(usuario).

Não sei porque o usuário não esta chegando no back-end

3 respostas

Rafael, não vi onde esta a importação do seu model.

Olá Matheus,

Eu omiti os imports para ficar mais facil de visualizar.

solução!

Consegui identificar o problema aqui,

no meu service:

logar(usuario: UsuarioComponent) {
    console.log('Meu usuário:' + usuario)
    return this.http.post(this.url, JSON.stringify(usuario))
      .map((res) => {       
        console.log('meu token:' + res.headers.get('x-access-token'))              
        var token = res.headers.get('x-access-token');
          if (token) {
            console.log('tem token')
            this._loggedIn.next(true);
            localStorage.setItem('token', token);
           }
        });
  }

Ao fazer JSON.stringify(usuario) o nodejs não reconheciaa string como parte do body, então dava erro.

Eu troquei para 'return this.http.post(this.url, usuario)' e agora o usuário chega no body normalmente.

Não entendi porque o express não reconhece string como parte do body.