Estou configurando as rotas da minha aplicação em Vue.js, inicialmente esta tudo OK, após fazer o login o usuário é redirecionado para o dashboard, agora minha dúvida é como posso evitar que o usuário acesse a rota "/login" (de novo) depois que ele já fez o login e redirecioná-lo de volta à rota anterior? (que ele estava antes de digitar na barra de endereço "/login")
lendo a documentação do Vue, eu sei que posso utilizar das navigation guards, e usando a global router.beforeEach
, que possui três parâmetros: to
, from
e next
, sei que posso manipular esse comportamento usando o from para retornar o usuário para a rota anterior caso ele acesse o "/login" enquanto logado. mas ainda não consegui fazer com que ele fosse redirecionado.
eis meu exemplo de código: router/beforeEach.js
import { checkUserToken } from 'src/utils/storageData'
const isAuthRoute = route => route.path.indexOf('/login') !== -1
const isLogged = () => !checkUserToken()
const needAuth = auth => auth === true
const beforeEach = (to, from, next) => {
const auth = to.meta.requiresAuth
// verifica se a rota requer autenticação
if (needAuth(auth)) {
// verifica se o usuário já está autenticado
if (!isAuthRoute(to) && !isLogged()) {
next('/login')
} else {
if (isLogged() && to.path === '/login') {
from()
}
next()
}
} else {
next()
}
}
export default beforeEach
router/index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import {routes} from './routes'
import beforeEach from './beforeEach'
Vue.use(VueRouter)
const router = Vue.router = new VueRouter({
linkActiveClass: 'active',
saveScrollPosition: true,
mode: 'history',
base: __dirname,
routes
})
// pega as configurações do import acima
router.beforeEach(beforeEach)
export default router