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

Erro ao se autenticar

Bom dia, ao finalizar o módulo 2, estou com erro ao se autenticar no login, da erro de usuário e senha, e aparece esse erro no console: TypeError: Cannot read property 'length' of null at HttpHeaders.push../nodemodules/@angular/common/fesm5/http.js.HttpHeaders.applyUpdate (http.js:200) at http.js:171 at Array.forEach () at HttpHeaders.push../nodemodules/@angular/common/fesm5/http.js.HttpHeaders.init (http.js:171) at HttpHeaders.push../nodemodules/@angular/common/fesm5/http.js.HttpHeaders.forEach (http.js:236) at Observable.subscribe (http.js:1436) at Observable.push../node_modules/rxjs/esm5/internal/Observable.js.Observable.trySubscribe (Observable.js:43) at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29) at subscribeTo.js:21 at subscribeToResult (subscribeToResult.js:11)

https://github.com/Lucasmaciiel/projeto-photos/tree/master/alurapic

9 respostas

Fala ai Lucas, tudo bem? Se você inspecionar a requisição na aba Network (Rede) do console no Chrome, a requisição foi realizada? Deu algum erro?

Fico no aguardo.

Inspecionei, não está fazendo a requisição, da erro de usuário ou senha invalida

login() {
    const userName = this.loginForm.get('userName').value;
    const password = this.loginForm.get('password').value;

    this.authService
        .authenticate(userName, password)
        .subscribe(
            () => this.router.navigate(['user', userName]),
            err => {
                console.log(err);
                this.loginForm.reset();
                this.platformDetectorService.isPlatformBrowser() && 
                    this.userNameInput.nativeElement.focus();
                alert('Invalid user name or password');
            }
        );
}
authenticate(userName: string, password: string) {

    return this.http
      .post(
        API_URL + '/user/login', 
        { userName, password }, 
        { observe: 'response'} 
      )
      .pipe(tap(res => {
        const authToken = res.headers.get('x-access-token');
        this.userService.setToken(authToken);
        console.log(`User ${userName} authenticated with token ${authToken}`);
      }));
  }
}

Fala Lucas, olhando os códigos parecem corretos, posso te pedir um favor? Compartilha o projeto atual completo comigo, assim eu consigo simular o problema por aqui e analisá-lo com mais calma (devia ter pedido na resposta anterior, desculpa por isso).

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Segue o link Matheus, https://github.com/Lucasmaciiel/projeto-photos/tree/master/alurapic

solução!

Fala Lucas, dei uma olhada no projeto, o problema está no seu interceptor, na classe: RequestInterceptor

Repare o seu if:

if (this.tokenService.hasToken) {

Você está verificando se o objeto tokenService tem a propriedade hasToken e não o retorna da função, o correto seria:

if (this.tokenService.hasToken()) {

Espero ter ajudado.

Nossa cara passou despercebido mesmo, estava travado com isso, Obrigado

Magina Lucas, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software