nav guard and redirection

import { useMainStore } from "~/stores/main";

export default defineNuxtRouteMiddleware(async (to, from) => {
    if (process.server) return;

    const MainStore = useMainStore();

    if (!MainStore.AccessToken) {
        return navigateTo("/auth/login");
    }
    const config = useRuntimeConfig();
    try {
        const resp = await $fetch(`${config.public.serverApi}/login`, {
            method: "post",
            credentials: "include",
            headers: {
                "Content-Type": "application/json",
            },
            body: {
                fromRefresh: true,
            },
        });
        MainStore.Login(resp.username, resp.accessToken);
        return;
    } catch (e) {
        console.log(e.data.message);
        return navigateTo("/auth/login");
    }
});

import { useMainStore } from "~/stores/main";

export default defineNuxtRouteMiddleware(async (to, from) => {
    if (process.server) return;

    const MainStore = useMainStore();

    if (!MainStore.AccessToken) {
        return navigateTo("/auth/login");
    }
    const config = useRuntimeConfig();
    try {
        const resp = await $fetch(`${config.public.serverApi}/login`, {
            method: "post",
            credentials: "include",
            headers: {
                "Content-Type": "application/json",
            },
            body: {
                fromRefresh: true,
            },
        });
        MainStore.Login(resp.username, resp.accessToken);
        return;
    } catch (e) {
        console.log(e.data.message);
        return navigateTo("/auth/login");
    }
});

<script setup></script>

<template>
    <div class="relative min-h-[100dvh]">
        <!-- start of bg of the auth pages -->
        <div class="absolute h-full w-full">
            <img src="/imgs/auth-bg.jpg" class="w-full h-full object-cover" />
            <div class="w-full h-full absolute bg-primary/30 inset-0"></div>
            <img
                src="/imgs/logo.png"
                class="absolute top-2 left-2 w-[15%] object-cover aspect-square"
            />
        </div>
        <!-- end of bg of the auth pages -->
        <slot />
    </div>
</template>

<style scoped></style>

<script setup></script>

<template>
    <div class="relative min-h-[100dvh]">
        <!-- start of bg of the auth pages -->
        <div class="absolute h-full w-full">
            <img src="/imgs/auth-bg.jpg" class="w-full h-full object-cover" />
            <div class="w-full h-full absolute bg-primary/30 inset-0"></div>
            <img
                src="/imgs/logo.png"
                class="absolute top-2 left-2 w-[15%] object-cover aspect-square"
            />
        </div>
        <!-- end of bg of the auth pages -->
        <slot />
    </div>
</template>

<style scoped></style>

<script setup>
    definePageMeta({
        middleware: ["require-auth"],
        // or middleware: 'auth'
    });
</script>

<template>
    <div></div>
</template>

<script setup>
    definePageMeta({
        middleware: ["require-auth"],
        // or middleware: 'auth'
    });
</script>

<template>
    <div></div>
</template>