NuxtN
Nuxt•14mo ago
Uzyxen

middleware

I created a middleware in which I send an api request and validate the JWT token. In the vue app I have a token download from the serwer.

App.vue
<script setup>
  const { useAccessToken } = useAuth();
  const token = useAccessToken();

    const { data } = await useFetch('/api/auth/refresh', {
      method: 'post'
    });
    if(data.value.access_token) {
      token.value = data.value.access_token;
    }
</script>


in composables I have useAuth.js with:

export default () => {
    const useAccessToken = () => useState('access_token');

    return {
        useAccessToken
    }
}

And id middleware authUser.ts:

const { useAccessToken } = useAuth();

export default defineNuxtRouteMiddleware(async (to, from) => {
    const token: any = useAccessToken();

    console.log(token);

    if(!token.value) {
        //return navigateTo('/logowanie');
    } else {
        const response = await $fetch('/api/auth/getAuthUser', {
            headers: {
                authorization: `Bearer ${token.value}` 
            }
        });

        if(!response) {
            return navigateTo('/logowanie');
        }
    }
});


My problem is that during SSR the "token.value" is undefined so even if user is logged he will be navigated to /login page.
Was this page helpful?