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

Parou de autenticar e não retorna o Token

Não está mais autenticando e consequentemente, não retorna o Token Estou utilizando um Json, nomeado Login, utilizando o Json Server, na porta 3002 com a seguinte estrutura para realizar a autenticação.

Eu realmente não gosto de utilizar os mesmos nomes do professor, me desculpa por isso, mas acredito que desta maneira, fazendo meu cérebro pensar eu aprendo mais e tiro a sensação de copiar e colar.

    {
        "id": "3",
        "UsuarioLogin": "thyago.estrada@teste.com",
        "UsuarioSenha": "hiena"
      }

Segue o login.service.ts:

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

const API_URL = "http://localhost:3002/Login";

@Injectable({providedIn: 'root'})
export class LoginService {

  constructor(private http: HttpClient) { }



  authenticate(UsuarioLogin: string, UsuarioSenha: string) {

    return this.http.post(API_URL, { UsuarioLogin, UsuarioSenha }, {observe: "response"} )
    .pipe(tap(resposta =>{
      const loginToken = resposta.headers.get('x-access-token');
      console.log(`User ${UsuarioLogin} authenticated with token ${loginToken}`);

Segue o login.component.html:

<form [formGroup]="loginform" (Submit)="login()" class="text-left mt-4">
                    <div class="form-group">
                        <input formControlName="email" class="form-control validation-field" placeholder="Email" type="text">                      
                        <small class="text-danger" *ngIf="loginform.get('email').touched && loginform.get('email').hasError('required')">Endereço de email</small>                              
                        <small class="text-danger" *ngIf="loginform.get('email').touched && loginform.get('email').hasError('email')">Email inválido</small>
                    </div>
                    <div class="form-group">
                        <input formControlName="password" class="form-control validation-field" placeholder="Password" type="password">
                        <small class="text-danger" *ngIf="loginform.get('password').touched && loginform.get('password').hasError('required')">Coloque a senha</small>                              
                        <small class="text-danger" *ngIf="loginform.get('password').touched && loginform.get('password').hasError('minlength')">Senha muito curta, mínimo de f 6 caracteres</small>
                    </div>
                    <div class="form-group d-flex justify-content-between">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="login-checkbox">
                            <label class="custom-control-label" for="login-checkbox">Mantenha-me Logado.</label>
                        </div>
                        <a class="transition pull-right" href="javascript:void(0);">Esqueceu sua senha?</a>                     
                    </div>
                    <div class="form-group">

                        <button [disabled]="!loginform.valid" class="btn btn-block" (click)="login()" type="submit"routerLink="/dashboard">Entrar</button>
                    </div>
                </form>

Segue o login.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormControl, FormBuilder, Validators} from '@angular/forms';
import { LoginService } from './login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class LoginComponent {
  public router: Router;
  public form:FormGroup;



loginform: FormGroup;  

  constructor(
     public formbuilder:FormBuilder, 
     private LoginService:LoginService) {

     }

        ngOnInit(): void {
      this.loginform = this.formbuilder.group({
          'email': ['', Validators.compose([Validators.required ])],
          'password': ['', Validators.compose([Validators.required, Validators.minLength(3)])]

      });
    }

    login(){

        const UsuarioLogin = this.loginform.get('email').value;
        const UsuarioSenha = this.loginform.get('password').value;

        this.LoginService.authenticate(UsuarioLogin, UsuarioSenha)
        .subscribe(() => console.log('autenticado'),
        err => {
            console.log(err);
            this.loginform.reset();
        }
        );
    }

}

 }

Estou adorando o curso, mas realmente dei uma empacada.

8 respostas

Fala aí Thyago, tudo bem? Está tudo no ar? Está tudo rodando sem erro? Se você tentar direto por um Postam ou Insomnia dá certo? Está dando algum erro no fluxo?

Olhando o código, aparentemente está correto.

Precisaria de mais detalhes para tentar lhe ajudar.

Fico no aguardo.

Boa noite Matheus Sim está tudo no ar, não há erro algum no console. Com qualquer usuário que tento logar ele aceita e consequentemente retorna o token como null. Provavelmente o problema está na autenticação que parou de funcionar

Mais nenhuma ajuda? Não consigo continuar o curso.... Tem algum outo canal para entrar em contato?

Boa noite, Thyago! Como vai?

Talvez o problema esteja justamente nessa questão da troca dos nomes! Afinal de contas a API tem uma URL específica para o login e tbm tem parâmetros com nomes específicos que ela espera receber para essa operação! Então meu chute é que vc nessa troca de nomes vc deve ter acabado se confundindo em algo! Afinal de contas para mudar os nomes no seu projeto em Angular, consequentemente vc precisará mudar tbm a API!

Sendo assim, a pergunta que fica é: Como está o código da API? Vc o modificou para que ficasse de acordo com os nomes que vc está usando? Dá uma olhada nela e veja se vc não deixou passar nada!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

solução!

Bom dia Gabriel, como disse no início da dúvida, não estou utilizando a API e sim um Json que eu mesmo criei, com a estrutura

 {
        "id": "3",
        "UsuarioLogin": "thyago.estrada@teste.com",
        "UsuarioSenha": "hiena"
      }

Minha intenção é utilizar email para autenticação e não nome.

Opa, Thyago! Como vai?

Mas ainda assim minha dúvida relativo ao seu processo permanece! Se vc não está usando a API disponibilizada pelo curso, provavelmente o problema está sendo causado pela forma como vc está utilizando para fazer o login! Afinal de contas, a API que o mestre Flávio disponibilizou era responsável pela avaliação dos dados do login e tbm por enviar o JSON caso tudo estivesse correto!

Portanto, para podermos te ajudar, creio que teríamos que ter acesso ao seu código do back-end com o objetivo de entender o que não está dando certo!

Boa tarde Gabriel Obrigado mas não dará certo. Tenho pouco tempo para estudo e decidi realizar da maneira que o mestre passa. Procurar o problema consumiu muito tempo sem aprendizado nenhum. Como este não é um curso de API, decidi deixar isto para uma próxima oportunidade e focar em aprender Angular.

Obrigado

Perfeito, Thyago! Só uma dica: numa próxima vez, dê preferência por terminar todo o curso da forma como o instrutor apresenta para que vc possa seguir a evolução do curso de forma perfeita! Daí, com tudo terminado, faça as suas modificações com o objetivo de fixar o que vc aprendeu! Dessa maneira, vc garante que conseguirá prosseguir no curso e tbm garante a fixação do conteúdo aprendido!

Sempre que tiver qualquer dúvida é só mandar aqui no fórum da Alura!

Grande abraço e bons estudos, meu aluno!

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