Gostaria de saber como fazer as rotas de forma que a navbar nao apareça na tela de login, só apareça quando o usuario for autenticado e entrar na home. Estou tentando e nao consigo fazer o componente aparecer dentro da home
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Gostaria de saber como fazer as rotas de forma que a navbar nao apareça na tela de login, só apareça quando o usuario for autenticado e entrar na home. Estou tentando e nao consigo fazer o componente aparecer dentro da home
Olá Estudante, tudo bem com você?
Uma solução mais simples e direta, é usar uma variável de controle no componente da navbar para exibi-la ou ocultá-la com base na página atual. Dito isto, no arquivo cabecalho.component.ts iremos criar uma variável que irá acompanhar as alterações de rota e ao navegar para a página de login (/home) a navbar será ocultada, e ao navegar para qualquer outra página, a navbar será exibida. Faremos isso por meio da cláusula if (ngIf) no arquivo cabecalho.componenet.html.
Abaixo, os códigos para alcançar este objetivo:
cabecalho.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { UsuarioService } from 'src/app/autenticacao/usuario/usuario.service';
@Component({
selector: 'app-cabecalho',
templateUrl: './cabecalho.component.html',
styleUrls: ['./cabecalho.component.css'],
})
export class CabecalhoComponent {
user$ = this.usuarioService.retornaUsuario();
mostrarNavbar: boolean = false;
constructor(private usuarioService: UsuarioService, private router: Router) {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
// Verifique se a rota atual é diferente da rota de login
this.mostrarNavbar = event.url !== '/home';
}
});
}
logout() {
this.usuarioService.logout();
this.router.navigate(['']);
}
}
cabecalho.componenet.html
<ng-container *ngIf="mostrarNavbar">
<header class="sticky-top">
<nav class="navbar navbar-light bg-white">
<a class="navbar-brand">Gatito Book</a>
<div *ngIf="user$ | async as user">
<div *ngIf="user.name; else login">
<i class="fa fa-user-circle mr-1"> </i>
<a class="mr-1">{{ user.name }}</a>
<a (click)="logout()">Logout</a>
</div>
</div>
</nav>
<ng-template #login>
<span class="navbar-text">
<a [routerLink]="['']">Login</a>
</span>
</ng-template>
</header>
</ng-container>
Abaixo, um gif com o resultado:
Vale ressaltar que a solução apresentada acima é mais simples em termos de configuração, mas ela apenas oculta a navbar no nível da interface do usuário, não afetando a autenticação real ou a autorização do usuário. Se você precisar de uma solução mais robusta com recursos de autenticação e autorização, recomendo que utilize o conceito de guarda de rotas. Inclusive, temos um curso de Angular na Alura que contempla o cenário de guarda de rotas, te convido a conhecê-lo e colocar em prática este recurso na sua aplicação:
Espero ter ajudado. Continue mergulhando em conhecimento e não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.
Em caso de dúvidas estou à disposição.
Abraços e bons estudos!