Curso Angular #64: Usando Guarda de Rotas: CanActivate

[@RafaelSantos-pq4od]

Já da pra usar o comando abaixo do angular cli: ng g guard guards/auth

[@DevGiselle]

Loiane seu curso é maravilhoso! O material e sua didática são excelentes! Muito obrigada!

[@moacir8663]

Os vídeos #63 e #64 são os meus preferidos!

[@boblipe02]

Aulas e Palestras Loiane, Obrigado

[@augustocsantan]

pelo que parece mudou o jeito de fazer agora tem que usar "CanActivateFn" função aqui está um jeito que eu fiz, na documentação do angular 17 tem explicando, e no youtube tem alguns video pelo menos em inglês! Dentro do "auth.guard.ts" export const authGuardGuard: CanActivateFn = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => { if(inject(AuthService).usuarioEstaAutenticado()){ return true; } inject(Router).navigate(['/login']); return false; }; Dentro do "app-routing.module.ts" const routes: Routes = [ { path: 'cursos', canActivate: [authGuardGuard], loadChildren: () => import('./cursos/cursos.module').then(m => m.CursosModule) }, { path: 'alunos', canActivate: [authGuardGuard], loadChildren: () => import('./alunos/alunos.module').then(m => m.AlunosModule) }, { path: 'login', component: LoginComponent }, { path: 'home', canActivate: [authGuardGuard], component: HomeComponent }, { path: '', redirectTo: 'home', pathMatch: 'full' } ];

[@brunohonda848]

Eu estava ansioso por outra aula já. Muito bom Loiane, parabéns.

[@Lorajobrpro]

Muito obrigado pelo compartilhamento do conhecimento. Para mim ficou muito claro esse conceito de Guarda de Rota. Obrigado!

[@wagnerdossantos466]

Excelente aula! Nem em faculdades ensinam dessa forma.

[@adsonsouzajesus]

Você é 10 Loiane!

Muito show... parabéns pela didática

[@novo5950]

Loiane, Você ensina muito bem, esse conteúdo tem me ajudado bastante.

[@nilopolitano]

Parabéns Loine pelo excelente trabalho, fiz todas as culas até aqui. Obrigado.

[@gabrielsoares7875]

Loiane, vc é demais! Muito obrigado!!

[@renatobento]

Gratidão!

[@SannonAragao]

Curti muito todas as aulas, excelente curso! Aguardando as próximas aulas! :-)

[@IcaroFelix2023]

Loiane, vc devia fazer um bootcamp de Angular

[@marlonreis2409]

Meu, obrigado mesmo por esse curso, agregou muito na minha vida!

[@Lucianosfj]

Excelente está de parabéns! Didática muito boa

[@aislan.nadrowski]

Olá pessoal, agora em 2023 usando o Angular 16 encontramos o CanActivate depreciado, no lugar dele entrou o CanActivateFn. Alguém teria uma ideia de como injetar o authService dentro do CanActivateFn tendo em vista que ele não é uma classe? Agradeço desde já!

[@aislan.nadrowski]

Pesquisando aqui cheguei na seguinte conclusão (não tome como verdade absoluta pois posso estar errado, mas aqui funcionou): esse novo modo do guarda é chamado de "guarda funcional" e não é mais baseado em classe. Dentro do arquivo de configuração de routing ficou igual (usei o canActivate: [authGuard]). O authService ainda existe (é ele que valida se o usuário é válido) e dentro do guarda gerado pelo comando (ng g g guards/auth) ficou assim: export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); if (auth.verificaUsuarioAutenticado) { return true; } router.navigate(['/login']); return false; }; Este método verificaUsuarioAutenticado ficou assim dentro do service: get verificaUsuarioAutenticado(): boolean { return this.usuarioAutenticado; }

[@loianegroner]

É isso mesmo! Muito obrigada por compartilhar a forma atual de fazer isso!

[@aislan.nadrowski]

Obrigado pelo feedback Loiane!

[@FordCamaroGT]

Boa!

[@aldosouza7850]

Valeu mano, me ajudou kkkkkkk

[@jacsonlinux]

Oi Loiane! Você irá falar sobre autenticação com JWT no curso Angular 2 ou já falou do assunto em outros cursos do seu canal?

[@buzzifilho]

Loiane, parabéns pelo excelente curso. Estou sempre indicando os seus cursos para alguém que queira aprender, pois realmente são muito bons. Estou acompanhando cada vídeo do curso de Angular 2 e 4, e tenho uma sugestão para você: Seria bom se houvesse um pequeno índice do curso, com as palavras-chave abordadas em cada vídeo, pois apesar dos títulos dos vídeos serem bem claros, eles não abrangem tudo o que é falado. Acredito esse índice com palavras-chave ajude a reencontrar um vídeo com explicações importantes e ajude também que seu curso seja encontrado quando essas palavras forem pesquisadas. Eu farei esse índice para mim de qualquer forma, qualquer coisa pode entrar em contato comigo. Obrigado pelo curso! E Parabéns

[@pitosauriorex3674]

muito boa a aula! eu queria saber como implementar tokens com essa tecnica... tenho um objeto que vem da minha bd e faço a autentificação do jeito que vc ensinou, agora quero guardar a informação para poder recarregar a pagina sem problema. tem algum material explicando isso? desde ja, muito obrigado pela resposta!

[@mateusspadari5171]

Obrigado por mais essa aula incrível !

[@01rmartins]

Sensacional o seu curso, parabéns!

[@renancoelho5657]

E pra criar um Guard pra tela de login? Por exemplo: já estou logado, então quando acessar a página de login, me redirecione para a página Home. Precisamos criar um outro arquivo '.guard' pra fazer esse trabalho, ou podemos aproveitar o auth.guard?

[@rafaelb.marcilio5550]

Oi Loiane, vai ter alguma aula falando sobre resolve para recuperar dados na transição de rotas? Outra dúvida, como faz pra redirecionar o usuário para uma rota padrão caso a url solicitada não senha nenhuma as rotas da aplicação? Se tivesse como dava uns mil joinha!!! Ansioso pelas próximas aulas!! Parabéns!!!

[@YuriFontella]

Muito bom, valeu por compartilhar tudo isso... no aguardo das próximas aulas. Só duas questões, não achei interessante a ideia de criar um novo componente para mostrar os detalhes, tanto em alunos quanto em cursos. Eu não consigo fazer métodos de "create, show, edit, update e destroy" tudo num só componente? E outra, esses guards... como ficam tudo do lado do cliente, qual a possibilidade de uma "invasão"? Ou mesmo criando esses gurds vou sempre ter que verificar no backend também?

[@rodrigostrj]

Ótimo curso! Parabéns!

[@FernandoGunther]

Ótima aula, esperando pelas próximas ansiosamente! Uma dúvida: você poderia me dizer uma maneira elegante ou correta pra guardar a rota que a pessoa estava antes de efetuar o login e direcionar pra ela: exemplo: usuário expirou e você estava no meio de uma operação. foi pra tela de login e após isso retornar de onde parou.

[@loianegroner]

oi Fernando, vou mostrar na p'roxima aula!

[@flawtista]

Ótima aula!

[@antoniofcable]

Muito bom. Parabéns

[@profcarlosmaximo]

Obrigado pelo curso! Muito boa a sua metodologia e seu empenho em disponibilizar um curso completo de angular 2. Você pretende mostrar um exemplo na prática do httpModule? Obrigado.

[@loianegroner]

+Eddu Max obrigada! Sim, vamos ter um módulo somente sobre isso

[@profcarlosmaximo]

Obrigado!

[@LageAfonso]

Excelente! Parabéns!

[@Halissonskalee]

ótimo parabéns!

[@ferreira.weslei]

Ola Loiane, primeiramente parabéns pelo seu trabalho. Sou novo no angular. Me tire um dúvida como poderia salvar me usuário logado, da forma que eu não perca meu usuário se o navegar for recarregado ? Como se fosse uma sessão em PHP. Obrigado pela atenção.

[@rdcastilho]

ola... como faço para ter acesso ao material apresentado nas aulas? por favor, se puderem compartilhar. obrigado. parabens pelo curso, esta agregando muito no meu desenvolvimento.

[@silenceofcolours]

Olá Loiane, primairamente gostaria de agradecer pelo excelente conteúdo de angular 2. Jà assisti todos em uma semana. Tenho uma dúvida. Sou programador .NET e lá na empresa estamos iniciando um projeto angular 2. Usamos, normalmente, o Visual Studio 2015. A dúvida é se eu consigo instalar o angular-CLI no Visual Studio 2015 ou se só existe compatibilidade com o Visual Studio Code. Obrigado!

[@barroslipe]

Muito bom! parabéns! (y)

[@jacsonlinux]

Show! valew Loiane

[@TutoDS2014]

É possível usar o guard no HTML para ocultar items?

[@marcelologica]

Parabéns Loiane pelo excelente trabalho. Tenho acompanhado cada aula. Muito bom. Uma pergunta: como você faria para não ser necessário o login novamente caso o usuário desse refresh na página? Já que ele já foi autenticado.

[@loianegroner]

Obrigada! A maneira mais simples seria através de um cookie com uma validade. A api do cookieStore do ng1 não veio para o ng2, mas a comunidade fez uma versão semelhante que pode ser usada: www.npmjs.com/package/angular2-cookie

[@leonardonascimento2569]

Oi Loiane, parabéns! Então, o localStorage ou o sessionStorage resolveria isto?

[@davidsonmichael1987]

Excelente trabalho Loiane, tu tinha como bolar depois cursos de: * Jquery * JqueryMobile * MVC

[@MarcosPS]

Você é demais!

[@marcelofranca6943]

muito bom

[@silenceofcolours]

Mais uma questão Loiane. Estou precisando implementar um load spinner e tbém utilizar algum componente para graficos. Por acaso vc conhece algum theme angular 2 que possua estes controles? Obrigado!!

[@khyquer]

Essa parte não consegui fazer funcionar, alguém conseguiu? Parece que a função está depreciada.

[@Jvjuino]

Só uma coisa. Quando eu do um refresh na pagina, eu ainda continuo logado. Quando eu estou na aba cursos, se eu der um refresh eu não fico logado, o menu não aparece mas eu consigo accesar os meus cursos. Não dá erro mas também não funciona 100% Alguém pode me ajudar com isso? @Loiane Groner

[@Lsp1383]

Tenho duas dúvidas: como faz para "deslogar". E uma vez logado, como faço para quando atualizar a página ela não volte para a tela de login? Procurei a vídeo-aula que explica mas não encontrei.

[@Lsp1383]

@Elaine Manoelle obrigado

[@fabriciogomesdasilva74]

No Angular 14, não consegui funcionar o guarda rotas. Ele continua acessando Cursos e o Home, mas não os Alunos. Alguém mais com esse problema?

[@gabrielabiramia]

Loiane depois deste modulo o curso acaba ? obrigado

[@loianegroner]

+Gabriel Madeira ainda nao. Tem a parte de http e forms ainda

[@gabrielabiramia]

Onde está loiane? Pela playlist ele acaba aqui 😁

[@EderLopesZoe]

ela ainda vai fazer, calma

[@loianegroner]

Tem mais umas 30 aulas pro curso acabar, ainda não postei, estou repondo as aulas desatualizadas! :)

[@CesarDevesa]

Tks!!!

Loiane mais uma vez parabéns! Só uma pergunta, sei que pode vir nas próximas aulas mas... Criei uma rota filha e tudo funcionando lindo, mas se atualizo a tela ele dá o seguinte erro! EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load Vou resolver isso com Guarda de rotas filhas ? pode dar uma luz para eu pesquisar? Obrigado!

[@loianegroner]

oi Tarcisio, esse é um bug do angular-cli. Eles irão corrigir o erro na próxima versão. Precisa sempre reiniciar o server sempre que fizer qualquer alteração. []s

[@igorpwn]

Alguém sabe por que precisamos retornar false mesmo saindo da rota? Ao sair da rota a função já não "morreria"?

[@loianegroner]

O retorno esperado pelo angular é true ou false apenas.

[@albuquerque1992]

boa noite, nada ave com a aula de angular, mas queria saber se as suas videos aula de CSS3 com Sass e Compass mesmo sendo antigas é 100% aproveitável ? ou tem alguma coisa de mudado de hoje ????

[@thiagomota7225]

Fiz um teste que depois de estar autenticado tento acessar uma rota diretamente pela url, porém sou redirecionado para a página de login. O serviço está anotado com Injectable e o provideIn: 'root'. Mas o que parece é que quando tento acessar um rota pela url o mesmo cria uma nova instância do serivço AuthService, consequentemente tornando o valor de retorno do método usuarioEstaAutenticado() falso. Alguém está com esse problema? Qual medida adotar?

[@felipeabreumotta7651]

É o comportamento esperado visto que ainda não estamos usando cookies ecc, quando acessa direto pela barra do navegador é o mesmo que fazer um refresh da pagina, reiniciando a aplicação.

[@rafaelyahu]

Tenho uma pequena dúvida, quem souber... após o login minha rota leva para 'painel', pios bem, se eu acessar qualquer outra rota depois de logado como por exemplo 'painel/usuarios', se eu atualizar a página, ele sempre me encaminha para a rota padrão que é 'painel', não importa a rota que eu esteja após o login, ele sempre me leva para a rota 'painel'. Como posso corrigir isso, atualizar a página e permanecer na mesma ?

[@loianegroner]

Quando você atualiza a página reseta a informação. Teria que guardar num localstorage por exemplo e fazer uma verificação extra

[@rafaelyahu]

@@loianegroner tipo o token de quem logou?

[@loianegroner]

Sim.

[@joaoantunesguimaraes]

No angular 13 não consegui utilizar o Guarda de rota { path: 'cursos', loadChildren: () => import('./cursos/cursos.module') .then(module => module.CursosModule ) }, não consegui colocar o CanActivate: [AuthGuard] com esta sintaxe

[@kayketorres3589]

Consegui utilizar com essa sintaxe: (Angular 14) const appRoutes: Routes = [ { path: 'cursos', loadChildren: () => import('./cursos/cursos.module').then( mod => mod.CursosModule), canActivate: [AuthGuard] },

[@gabrielabiramia]

Para mim só aparece ate a aula 64. Vi que tem 3 videos privados. Seriam as aulas restantes?

[@loianegroner]

+Gabriel Madeira regravacao das primeiras aulas

[@loianegroner]

+Gabriel Madeira e o restante das aulas até março/abril

[@gabrielabiramia]

As aulas de form e http que vc mencionou eu não encontrei. :-(

[@regismatos]

Show

[@MatheusSilva-gx8sj]

ótima aula! excelente!