Frontend middleware auth with backend auth

// stores/userStore.ts
import { ref } from 'vue';

export const useUserStore = () => {
    const user = useState('user', () => {
        if (process.client) {
            const storedUser = localStorage.getItem('user');
            return storedUser ? JSON.parse(storedUser) : null;
        }
        return null;
    });

    const setUser = (newUser) => {
        user.value = newUser;
        if (newUser && process.client) {
            localStorage.setItem('user', JSON.stringify(newUser));
        } else {
            if (process.client) {
                localStorage.removeItem('user');
            }
        }
    };

    const clearUser = () => {
        user.value = null;
        if (process.client) {
            localStorage.removeItem('user');
        }
    };

    return { user, setUser, clearUser };
};

// ~/plugins/storePlugin.ts
import {useUserStore} from "~/stores/userStore";

export default defineNuxtPlugin((nuxtApp) => {
    const userStore = useUserStore();

    if (process.client) {
        const storedUser = localStorage.getItem('user');
        if (storedUser) {
            userStore.setUser(JSON.parse(storedUser));
        }
    }

    nuxtApp.provide('store', {
        user: userStore.user,
        setUser: userStore.setUser,
        clearUser: userStore.clearUser,
    });
});

import { Middleware } from '@nuxt/types'
import axios from 'axios';
import {useUserStore} from "~/stores/userStore";


const protectedRouteNames = [
    {
        name: 'index',
        isLoginRequired: false,
        requiredRole: []
    },
    {
        name: 'dashboard',
        isLoginRequired: true,
        requiredRole: []
    },
    {
        name: 'admin-user-management',
        isLoginRequired: true,
        requiredRole: ['admin']
    },
]

function getRouteProtectionInfo(routeName: string | any) {
    return protectedRouteNames.find(obj => obj.name === routeName);
}

async function isUserAuthenticated(): Promise<any> {
    const { user, setUser } = useUserStore();
    if (user.value) {
        return { user: user.value };
    }

    try {
        const response = await axios.get("http://localhost:4000/api/auth/verify", { withCredentials: true });
        user.value = response.data.user;
        return { user: response.data.user };
    } catch (error) {
        return { user: null };
    }
}

export default defineNuxtRouteMiddleware(async (to, from) => {
    const routeProtectionInfo = getRouteProtectionInfo(to.name);
    const { user, setUser } = useUserStore();

    if (routeProtectionInfo) {
        if (routeProtectionInfo.isLoginRequired) {
            const userAuthData = await isUserAuthenticated();
            console.log('User: ', user)

            if (userAuthData && userAuthData.user) {
                setUser(userAuthData.user);
                console.log('User: ', user)

                const userRole = userAuthData.user.role;

                if (routeProtectionInfo.requiredRole.length > 0 && !routeProtectionInfo.requiredRole.includes(userRole)) {
                    return navigateTo('/unauthorized');
                }
            } else {
                console.log("User is not authenticated");
                return navigateTo('/');
            }
        }
    }
});