I'm currently utilizing Vue and Firebase to build my application. One of the features I want to implement is the redirect method using vue-router.

Within my vue-router code, I've included meta: { requiresAuth: true } in multiple pages as middleware.

The redirect logic in my vue-router is designed to send users to /login if the JWT token is not stored in local storage upon login.

Given that I'm leveraging Firebase for user authentication, I expect the user account token to be stored in local storage once a user logs in successfully. Assuming my Vuex code is correct, the vue-router should function as intended.

Upon logging in as a user, the URL remains unchanged. However, when navigating to a specific user's dashboard page, the redirect functionality works smoothly.

I am puzzled by the fact that the URL does not change after logging in. Why might this be happening?

import Vue from 'vue'
import VueRouter from 'vue-router'
//import Home from '../views/Home.vue'
import Dashboard from '../views/Dashboard.vue'
import OrdersMobile from '../views/OrdersMobile.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "about" */ '../selfonboarding/Home.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../components/Login.vue')
  },
  {
    path: '/dashboard/',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true },
    children: [
      {
        path: 'products/:id',
        name: 'Products',
        component: () => import(/* webpackChunkName: "about" */ '../views/Products.vue')
      },
      {
        path: 'working-hours/:id',
        name: 'WorkingHours',
        component: () => import(/* webpackChunkName: "about" */ '../views/WorkingHours.vue')
      },
      // {
      //   path: 'pictures/:id',
      //   name: 'Pictures',
      //   component: Pictures,
      // },
      {
        path: 'orders/:id',
        name: 'Orders',
        component: () => import(/* webpackChunkName: "about" */ '../views/Orders.vue')
      },
      {
        path: 'orders.s/:id',
        name: 'OrdersMobile',
        component: OrdersMobile,
        children: [
          {
            path: 'processed',
            name: 'Processed',
            component: () => import(/* webpackChunkName: "about" */ '../views/Processed.vue')
          }
        ]
      },
      {
        path: 'information/:id',
        name: 'Information',
        component: () => import(/* webpackChunkName: "about" */ '../views/Information.vue')
      },
      {
        path: 'information.s/:id',
        name: 'InformationMobile',
        component: () => import(/* webpackChunkName: "about" */ '../views/InformationMobile.vue')
      },
    ]
  }
]


const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})


router.beforeEach((to, from, next) => {
  if(to.matched.some(record => record.meta.requiresAuth)) {
      if (localStorage.getItem('jwt') == null) {
          next({
              path: '/login',
              params: { nextUrl: to.fullPath }
          })
      } 
  } else {
      next()
  }
})


export default router

Vuex Code at ../store/user.js

import 'firebase/firebase-auth'
import fireApp from '@/plugins/firebase'
import router from '../../router'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();

const state = {
    currentUser: null
}

const getters = {
    currentUser: state => state.currentUser
}

const mutations = {
    userStatus: (state, user) => {
       
        user === null ? state.currentUser = null : state.currentUser = user.email
      }
}

const actions = {
 signIn: async ({ commit }, user) => {
    try {
      const userData = await fireApp.auth().signInWithEmailAndPassword(
          user.email,
          user.password
      );

        // Get the user id (from the user object I guess)
        const userId = fireApp.auth().currentUser.uid;
        // or maybe through  const userId = fireApp.auth().currentUser.uid;

        const proUserDocRef = db.collection('ProUser').doc(userId);
                    
        proUserDocRef.get().then((doc) => {
                if(doc.exists && doc.data().status === true) {
                    router.push({name:'Products',params:{id: userId}}).catch(err => {})
                } else if(doc.exists && doc.data().status === false){
                    router.push({name:'Welcome',params:{id: userId}}).catch(err => {})
                } else {
                    alert('You are not registered as a pro user.')
                }
        })

        
    }
    catch(error) {
        const errorCode = error.code
        const errorMesage = error.message
        if(errorCode === 'auth/wrong-password') {
            alert('wrong password')
        } else {
            alert(errorMesage)
            }
        }
    },

    signOut: async({ commit }) => {
        try {
            await fireApp.auth().signOut()
        }
        catch(error) {
            alert(`error sign out, ${error}`)
        }
        commit('userStatus', null)
    }
}

export default {
    state,
    mutations,
    getters,
    actions
}