Bom dia, gostaria de uma orientação em realização um Login (Autenticação) usando Json-Server (FAKE API). O Json-Server suporta essa funcionalidade?
Estava seguindo umas aulas no Alura sobre Ionic e Angular, e eles usam o método POST para realizar o login do usuário, porém, ao tentar fazer isso no meu projeto usando Json-Server, ele adiciona os dados na API, sendo um login válido ou inválido!
Vou postar os meus códigos abaixo para tentar deixar claro os meus procedimentos.
O meu Json-Server no seu arquivo db.json contém os seguintes dados:
"usuarios": [
{
"id": 1,
"nome": "Dennis",
"sobrenome": "Cezar",
"endereco": "Endereço Completo",
"telefone": "XXXXX-XXXX",
"email": "[email protected]",
"senha": "123",
"acesso": 1
},
{
"id": 2,
"nome": "Marcos",
"sobrenome": "Gonçalves",
"endereco": "Endereço Completo",
"telefone": "XXXXX-XXXX",
"email": "[email protected]",
"senha": "123",
"acesso": 2
}
]
No meu componente UsuarioService.TS do Ionic está da seguinte forma:
API: string = "http://localhost:3000/usuarios/";
constructor(private http: HttpClient) { }
getLogin(email: string, senha: string) {
return this.http.post(this.API, {email: email, senha: senha});
}
No meu componente LoginPage.HTML está da seguinte forma:
<form [formGroup]="loginForm">
<ion-list>
<ion-item>
<ion-label position="floating">E-mail</ion-label>
<ion-input type="text" formControlName="email" name="email"></ion-input>
</ion-item>
<p *ngIf="loginForm.get('email').errors?.required" class="textoRequired">E-mail é obrigatório!</p>
<ion-item>
<ion-label position="floating">Senha</ion-label>
<ion-input type="password" formControlName="senha" name="senha"></ion-input>
</ion-item>
<p *ngIf="loginForm.get('senha').errors?.required" class="textoRequired">Senha é obrigatória!</p>
</ion-list>
<div>
<ion-button [disabled]="loginForm.invalid" class="ion-padding" expand="block" color="tertiary" (click)="loginUsuario()">Entrar</ion-button>
</div></form>
Finalmente, no meu componente LoginPage.TS está da seguinte forma:
loginForm: FormGroup;
constructor(private router: Router,
private formBuilder: FormBuilder,
private usuarioService: UsuarioService,
public toastController: ToastController) { }
ngOnInit() {
this.loginForm = this.formBuilder.group({
email: ['', Validators.required],
senha: ['', Validators.required]
});
}
loginUsuario() {
const email = this.loginForm.get('email').value;
const senha = this.loginForm.get('senha').value;
this.usuarioService.getLogin(email, senha)
.subscribe(() => {
console.log("Logou com sucesso!");
}, erro => {
console.log(erro);
this.loginForm.reset();
});
}
Espero que essas informações ajudem para esclarecer meus procedimentos.
O formulário pega os dados corretamente, só que em vez de verificar no Json-Server se o usuário existe ou não, ele faz a criação de um novo Objeto com os dados ID, Email e Senha que eu digitei nos campos de Login.
Será que o Json-Server não é preparado para isso, estou fazendo algo de forma incorreta?
Gostaria se possível de uma orientação!
Obrigado desde já.
json-server
dá para realizar autenticação, o mais correto é perguntar na plataforma que está assistindo as aulas diretamente ao professor.