Boa noite professor, como faria para autenticar o endereço no caso da aplicação existir um login, para não permitir o usuário acessar as rotas sem essa validação? E como ficaria o arquivo App.vue? chamaria um componente Login.vue ou faria no próprio App.vue?
hoje, com a Alura e o Google Gemini
Boa noite.
Geralmente em uma SPA como Vue as autenticações são feitas baseadas em token.
Para que você consiga ter uma visão geral sobre o processo, peço que assista o seguinte capítulo do curso de MEAN. Não se preocupe, o curso usa Angular e backend em Node.js, mas a lógica é a mesma. Angular tem http, Vue tem http e por ai vai.
https://cursos.alura.com.br/course/mean-javascript/task/13788
Depois de assistir, dá uma conferida na aula do Vue sobre interceptadores em Http. Eu falo brevemente, mas você poderá fazer algo análogo ao que viu no vídeo anterior.
Em sua, no bakcend você precisa bloquear o acesso não autorizado à API (não basta bloquear no lado do Vue). Mas essa parte do backend foge do escopo do Vue e você pode implementar na tecnologia que preferir.
Já no lado do Vue, você pode proteger rotas, isto é, não deixar que alguém acesse uma rota da SPA se não estiver logado, por exemplo. Para isso existem guardas de rotas. '
Sobre esse recursos, dá uma olhada na parte "Secure routes" neste artigo
https://medium.freecodecamp.org/authentication-with-vue-js-firebase-5c3a82149f66
Essa parte não é o problema, a questão é a geração do token e armazenamento que há uma forte dependência do backend, por isso que pode ser um tanto complicado para quem é só de front. Mas o vídeo que lhe passei vai esclarecer muita coisa.
Espero ter ajudado. Sucesso e bom estudo!
Você pode usar Navigation Guards do Vue-Router,
router.beforeEach((to, from, next) => {
if(from.auth){
if(auth){
next()
}else{
alert('Você não tem permissão para acessar essa pagina')
}
}else{
next()
}
})A logica em sí é mais ou menos isso, mas você vai precisar de um token para validar o login.