How to protect Dashboard page from unauthenticated user in an SPA with Laravel and Vuejs

Question

When a user logs in I'm storing the status in local storage as shown below using and they get redirected to their dashboard. The dashboard is viewable when we have authenticated = 'true' in the local storage. That works well but now anyone who navigates to the local storage and provides that manually then they can be able to view the dashboard. How can I protect the page if one is not authenticated and they try to view it manually? Sidenote: The APIs are protected with sanctum.

authUser.js

import { defineStore } from 'pinia'
import router from '../router'
import { useLocalStorage } from '@vueuse/core'


export const useLoginStore = defineStore('login', {
    state: () => {
        return {
            fields: {},
            errors: {},
            loading: false,
            authenticated: useLocalStorage('authenticated', null)
        }


    },
    actions: {
        logout() {
            axios.get("/sanctum/csrf-cookie").then(() => {
                axios.post("/api/logout").then((response) => {
                    this.authenticated = null
                    router.push({ name: "Login" });
                });
            });
        },
        login() {
            this.loading = true;
            axios
                .post("/api/login", this.fields)
                .then((res) => {
                    if (res.status == 201) {
                        this.fields = {}
                        this.authenticated = true
                        this.loading = false;
                        router.push({ name: "Dashboard" });
                    }
                })
                .catch((error) => {
                    if (error.response.status == 422) {
                        this.errors = error.response.data.errors;
                        this.loading = false;
                    }
                });
        },
    },

})