Bloquear rotas Vue JS
Olá, Mestre!
Tentei bloquear as rotas para serem acessadas somente com usuário logado usando o `beforeEach` conforme ensinado nessa aula, mas não deu certo.
Segui a doc do Vue Router, mas também não foi.
Ao tentar acessar uma rota sem estar logado, o Vue até me redireciona de volta pra página de login, mas ai, ao fazer login, da erro na página e não me direciona pra página seguinte.
Fiz conforme código abaixo:
const token = localStorage.getItem(TOKEN_NAME)
router.beforeEach((to, from, next) => {
if (to.meta.logged == true && !token) return next({ name: 'login' })
next()
})
Pode me dar um help?
Repo do meu projeto: https://github.com/thiagoluna/auth-jwt-crud-vuejs
Obrigado!
Olá, Thiago!
Tudo bem?
Tem um print do erro que acontece após fazer o login (especialmente da guia console do Browser)?
Ou o erro é "too many requests"?
Olá, Carlos!
Segue link do print do erro: https://uploaddeimagens.com.br/imagens/Uoc-ikg
Ao tentar acessar a página /users sem ter feito login sou redirecionado para a página de login.
A partir disso, não consigo mais fazer login, dando o erro conforme imagem do link.
Faz um debug, lá no router.js, em beforeEach, onde está entrando:
if (to.meta.logged === true && !token) {
console.log('aqui')
} else {
console.log('ops 2')
}
Se tento acessar uma rota protegida sem ter feito login retorna 'aqui'
Se tento acessar uma rota protegida logado retorna 'ops 2'
Já tentei de tudo e não funciona :(
Esse if que está com a lógica errada.
Porque só vai redirecionar para login se estiver logado E não tiver o token
Deve redirecionar para login se não tiver logado (no vuex estiver logged false) OU não tiver o token
Esse logged está setado assim no router.map.js {path: '/home', component: Home, name: 'home', meta: {logged: true}},
Então, no if, se o to.meta.logged for true significa que tem que ter o token setado no vuex ou o store.state.auth.authenticated tem que estar true.
Quando tento acessar uma rota protegida, que tem esse logged: true, mas sem estar logado, ou seja, sem ter o token no localStorage sou redirecionado pra pagina de login.
A partir dai começa a dar o erro do print acima e não consigo mais fazer login.
Ahhh verdade o to está vindo das rotas
Nesse curso aqui amigo, no frontend tem um exemplo exatamente igual ao que precisa, baixa o código fonte dele pra pegar o exemplo (resources/js/routes/routes.map.js): https://academy.especializati.com.br/curso/laravel-com-vue-js
Se não conseguir resolver (deixa as factoriess do seu no jeito) que vou rodar ele aqui local e te ajudar a resolver.
Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!