3

AuthService

login(user: User){
    return this.http.post<any>(`${this.API_URL}`, {
        email: user.username,
        password: user.password
    });
}

isUserLoggedIn(){
    return this.http.get<any>(`${this.API_URL}/1`);
}

logoff(){
    //this.loggedIn.next(null);
    this.router.navigate(['/login']);
}

LoginComponent

onSubmit(){
    this.submitted = true;
    this.authService.login(this.loginForm.value).subscribe(r => {
        if(r.success){
            this.router.navigate(['/home']);
        }
    });
}

Auth Guard

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): any{
    return this.authService.isUserLoggedIn()
    .pipe(
        map(res => {
            if (res.isAuth){
                return true;
            }
            this.router.navigate(['/login']); 
            return false;
        })
    );
}
  • Eu tenho um Service (AuthService);
  • No LoginComponent: Envia os dados a uma API para fazer o login (envia-se username e password) que retorna sucesso se o usuário existir;
  • No Guard: Outro serviço (isUserLoggedIn()) verifica se o usuário está logado e se a sessão ainda está viva.

Existe um outra abordagem para autenticação do usuário no Angular 4+? Seria esta abordagem usada na maioria dos projetos?

1 Resposta 1

1

Eu uso algo semelhante num projecto que tenho em Angular.

Tens aqui um tutorial um pouco mais complexo, mas que simplificando faz o mesmo que o teu código. https://jasonwatmore.com/post/2018/11/16/angular-7-jwt-authentication-example-tutorial

No meu caso a API é em PHP/Laravel e uso o package tymon/jwt-auth

1

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 .