I am facing an issue with the code that is supposed to redirect the User to the dashboard page if they have a token. Despite generating a JWT token from my Spring Boot backend and sending it to Vue for processing, the redirection is not working as expected.
import { setupLayouts } from 'virtual:generated-layouts'
import { createRouter, createWebHistory } from 'vue-router'
import { isUserLoggedIn } from './utils'
import routes from '~pages'
import { canNavigate } from '@layouts/plugins/casl'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
redirect: to => {
const userData = JSON.parse(localStorage.getItem('accessToken') || '{}')
console.log(userData)
if (userData)
return { name: 'pages-misc-coming-soon' }
else
return { name: 'login', query: to.query }
},
},
{
path: '/pages/user-profile',
redirect: () => ({ name: 'pages-user-profile-tab', params: { tab: 'profile' } }),
},
{
path: '/pages/account-settings',
redirect: () => ({ name: 'pages-account-settings-tab', params: { tab: 'account' } }),
},
...setupLayouts(routes),
],
})
router.beforeEach(to => {
const isLoggedIn = isUserLoggedIn()
if (canNavigate(to)) {
if (to.meta.redirectIfLoggedIn && isLoggedIn)
return '/'
}
else {
if (isLoggedIn)
return { name: 'not-authorized' }
else
return { name: 'login', query: { to: to.name !== 'index' ? to.fullPath : undefined } }
}
})
export default router