Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Ashraam's avatar
Level 41

Vue Router and reloading, how to redirect to the requested page

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;
0 likes
6 replies
tykus's avatar

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")
1 like
Ashraam's avatar
Level 41

That's not the problem here, I'm already using storage for token.

My problem is when I reload while on page /reset (don't care if auth or not) I'll be redirected to /login (if not auth) or root (if auth). But I'd like to stay on /reset

1 like
phyothihakyaw_dev's avatar

Did you found a way to solve this bro ? I am having the same issue right now and I am new to programming : (

Ashraam's avatar
Level 41

Not really, found an ugly way with localStorage (each time I change page I keep the last URI requested then on the mounted method of my main component I check if this variable exists..)

There must be another way I guess, but for now it work.

ejdelmonico's avatar

Vue router uses a fall-through type path matching so / will match all routes. Therefore, your code will require auth on all routes because the beforeEach() is catching the auth required meta. That is my thought process on this question.

Please or to participate in this conversation.