Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Dúvida sobre o rodapé

Mesmo com a guarda de rota o rodapé que tem o simbolo da "casinha" que direciona para o Home ele não volta para o animais, mesmo com o usuário logado aparece a tela de Home/Login. O que pode ser feito para correção? Algum *ngIf? eu não sei como realizar essa implementação fiquei pensando aqui não cheguei a lugar nenhum kkk

1 resposta
solução!

Oi Romulo, tudo bem?

Desculpe a demora em retornar. Vamos analisar a sua situação e tentar encontrar uma solução para o seu problema.

Primeiramente, é importante entender que a guarda de rota é uma funcionalidade do Angular que permite controlar o acesso às rotas da aplicação. Ela é muito útil para garantir que somente usuários autorizados possam acessar determinadas páginas. No entanto, é possível que a sua implementação esteja causando conflito com o redirecionamento do rodapé.

Uma solução simples para esse problema seria utilizar uma diretiva *ngIf no seu HTML para verificar se o usuário está logado e, assim, decidir qual botão deve ser exibido no rodapé. Você pode fazer isso verificando a existência de um token de autenticação no localStorage do navegador, por exemplo.

Veja um exemplo de como ficaria o código HTML do seu rodapé com essa diretiva:

<footer>
  <button *ngIf="localStorage.getItem('authToken')" (click)="voltarParaAnimais()">Voltar para animais</button>
  <button *ngIf="!localStorage.getItem('authToken')" (click)="irParaHome()">Ir para home</button>
</footer>

Observe que estamos verificando a existência do token de autenticação no localStorage e exibindo o botão "Voltar para animais" apenas se o usuário estiver logado. Caso contrário, exibimos o botão "Ir para home". Além disso, estamos adicionando um evento de clique em cada botão para chamar a função correspondente.

Agora, você pode implementar as funções "voltarParaAnimais()" e "irParaHome()" no seu componente do rodapé para realizar o redirecionamento correto. Veja um exemplo de como ficaria essa implementação:

import { Router } from '@angular/router';

@Component({
  selector: 'app-rodape',
  templateUrl: './rodape.component.html',
  styleUrls: ['./rodape.component.css']
})
export class RodapeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  voltarParaAnimais() {
    this.router.navigate(['/animais']);
  }

  irParaHome() {
    this.router.navigate(['/home']);
  }

}

Observe que estamos utilizando o serviço Router do Angular para navegar para as rotas correspondentes em cada função. A função "voltarParaAnimais()" navega para a rota "/animais" e a função "irParaHome()" navega para a rota "/home".

Com essa implementação, o redirecionamento do rodapé deve funcionar corretamente, independente da guarda de rota que você estiver utilizando.

Espero que tenha te ajudado.

Um abraço e bons estudos.