You need to persist your token in the browsers LocalStorage, so that it survives a refresh. Your store needs to handle the storage, retrieval and deletion of this token using the localStorage API, e.g.
localStorage.getItem("token")
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi everyone,
I've got a problem and I can't solve it, maybe someone here could help me.
When I reload the page (F5) I'm always redirected to /login (except if I've got a token in the store then I'll stay on /)
I'd like to stay on pages that don't require auth after a reload. eg: I'm on /reset, I reload the page and stay on /reset (right now after a reload I'm always redirected to /login)
It's the same if I copy / paste uri in the browser, always redirected to /login
How can I achieve that ?
Do you need something else in my code ?
thanks
Here is my vue-router confirguration
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from './store';
Vue.use(VueRouter);
import Calendar from './vue/Calendar.vue'
import Login from './vue/Login.vue'
import Register from './vue/Register.vue'
import LostPassword from './vue/LostPassword.vue'
const routes = [
{
path: '/',
name: 'index',
component: Calendar,
meta: {
requiresAuth: true
}
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/reset',
name: 'reset',
component: LostPassword
}
];
const router = new VueRouter({
mode: 'history',
routes
});
router.beforeEach((to, from, next) => {
if (to.matched.some(m => m.meta.requiresAuth) && store.state.token === null) {
return next('/login');
} else {
return next();
}
});
export default router;
Please or to participate in this conversation.