Ashraam
2224
6
Vue

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

Posted 1 year ago by Ashraam

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 sign in or create an account to participate in this conversation.