How to add guard to a router with Firebase and Vue 3 with Vuex state management

Question

I use Firebase and Vue 3 as state management. I use Vuex to create my login access, but I found a problem when the user has logged out. The page in /dashboard can still be accessed by users who are not logged in.

this my /src/main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.use(router);
app.use(store);
app.mount('#app');

this my /src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'page.login',
    component: () => import('./../pages/login/Login.vue')
  },
  {
    path: '/dashboard',
    name: 'page.dashboard',
    component: () => import('./../pages/dashboard/Dashboard.vue'),
    children: [
      {
        path: '/home',
        name: 'page.home',
        component: () => import('./../pages/home/Home.vue')
      },
      {
        path: '/profile',
        name: 'page.profile',
        component: () => import('./../pages/profile/Profile.vue')
      },
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router;

this my /src/store/index.js

import { createStore } from 'vuex'
import { auth } from '@/firebase/config'
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged
} from 'firebase/auth'

const store = createStore({
  state: {
    user: null,
    authIsReady: false,
  },
  getters: {
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload,
        console.log('user state ', state.user);
    },
    setAuthIsReady(state, payload) {
      state.authIsReady = payload
    }
  },
  actions: {
    async regsiterUser(context, { email, password }) {
      const res = await createUserWithEmailAndPassword(auth, email, password)
      if (res) {
        context.commit('setUser', res.user)
      } else {
        throw new Error('could not complete Resgiter')
      }
    },
    async loginUser(context, { email, password }) {
      const res = await signInWithEmailAndPassword(auth, email, password)
      if (res) {
        context.commit('setUser', res.user)
      } else {
        throw new Error('cant Login')
      }
    },
    async logoutUser(context) {
      console.log('Sign Out');
      await signOut(auth)
      context.commit('setUser', null)
    }
  },
  modules: {
  }
})

const unsub = onAuthStateChanged(auth, (user) => {
  store.commit('setAuthIsReady', true)
  store.commit('setUser', user)
  unsub()
});

export default store;

so the problem is how do I add Auth guard to each router that I want to protect? for example like this

const routes = [
  {
    path: '/',
    name: 'page.login',
    component: () => import('./../pages/login/Login.vue')
    guardAuth: false
  },
  {
    path: '/dashboard',
    name: 'page.dashboard',
    component: () => import('./../pages/dashboard/Dashboard.vue'),
    children: [
      {
        path: '/home',
        name: 'page.home',
        component: () => import('./../pages/home/Home.vue')
        guardAuth: true
      },
      {
        path: '/profile',
        name: 'page.profile',
        component: () => import('./../pages/profile/Profile.vue')
        guardAuth: true
      },
    ]
  }
];

if guardAuth: false then the user can access the page even if they don't log in first, if guardAuth: true then the page cannot be accessed by the user if the user is not logged in and if a hardcore user enters the page.home page then they will automatically be redirected to the page.login page