vue.js - Refreshing page redirects to home using vue router

Question

I am facing a problem with my vuejs project. I am using vue router in a single page application. I can go to any page using vue router. But when I reload the page at any route, it redirects me to / of the project. Here is the code I have written for vue router in router/index.js file.

import Vue from 'vue'
import VueRouter from 'vue-router'
// import store from '../store'
import Home from '../views/Home.vue'
import Login from '@/components/auth/Login.vue'
import Register from '@/components/auth/Register.vue'
import Admin from '@/components/admin/Admin.vue'
import CreateCourse from '@/components/admin/course/CreateCourse.vue'
import Categories from '@/components/admin/Categories.vue'

Vue.use(VueRouter);

function isAuthenticated(to, from, next) {
    // if (store.getters['auth/authenticated']) {
    //     next();
    // } else {
    //     next('/login');
    // }
    next();
}

function isAdmin(to, from, next) {
    // if (store.getters['auth/user'].role === 'super' || store.getters['auth/user'].role === 'admin') {
    //     next();
    // } else {
    //     next('/');
    // }
    next();
}

function isNotAuthenticated(to, from, next) {
    // if (!store.getters['auth/authenticated']) {
    //     next();
    // } else {
    //     next('/');
    // }
    next();
}

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
    {
        path: '/about',
        name: 'About',
        beforeEnter: isAuthenticated,
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
        path: '/login',
        name: 'Login',
        component: Login,
        beforeEnter: isNotAuthenticated,
    },
    {
        path: '/register',
        name: 'Register',
        component: Register,
        beforeEnter: isNotAuthenticated,
    },
    {
        path: '/admin',
        name: 'Admin',
        component: Admin,
        beforeEnter: isAdmin,
    },
];

const router = new VueRouter({
    mode: 'history',
    routes
});

export default router

What is the problem?

Note: The commented code is to control user access to a specific route. I am calling beforeEnter for each route to check if the user has permission or not. Is there any better solution?

Answer 1

I found what is wrong with my code. Every time I reload the page, I authenticate the user using vuex and if the authentication is successful, I redirect the user to home page. So, every time I refresh the page, I am authenticated and redirected to the home page. Now I have removed the redirect login after login and the problem is solved.