Vue 3 js Router can't access state in Pinia for user store (Need to Hydrate the pinia State)

Question

I am trying to check authorization for routes in a Vue 3 js application. The idea is that the authorization should be defined based on the role of the user (NavGuard). For that reason, when then user logs in (JWT token) I add his role to the state of a Pinia store (useUserStore).

I have read the documentation about "Using a store outside of a component" and it is actually working when the user logs in and is being redirected to the home page. If I console.log(store) I can see the role of the user.

However, whenever I navigate to another page, the state that is console.logged is the initial state (null for all values). I guess that the problem is that the router is loaded before that state is ready.

import NotFoundView from '@/views/public/NotFoundView.vue'
import { useUserStore } from '@/stores/user'
import pinia from "@/stores/store.js";


const router = createRouter({

  history: createWebHistory(import.meta.env.BASE_URL),

  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: AboutView
    },
   
    {
      path: '/:pathMatch(.*)*',
      name: 'NotFound',
      component: NotFoundView
    },


  ]
})

router.beforeEach(async (to, from) => {

  const store = await useUserStore();
 
  console.log(store.user)

})

export default router

Main.js

import { createApp } from 'vue'
import store from '@/stores/store'

import App from '@/App.vue'
import router from '@/router'
import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:8000'

const app = createApp(App)
app.use(store)
app.use(router, axios)


router.isReady().then(() => {
    app.mount("#app");
});

store.js

import { createPinia } from "pinia";

const pinia = createPinia();

export default pinia;

user.js

import { defineStore } from 'pinia'
import axios from 'axios'

export const useUserStore = defineStore('user', {
    id: 'user',

    state: () => {
        return {
            user: {
                isAuthenticated: false,
                id: null,
                name: null,
                email: null,
                access: null,
                refresh: null,
                role: null,
            }
        }
    },

    actions: {
        initStore() {
            console.log('initStore')

            if (localStorage.getItem('user.access')) {
                this.user.access = localStorage.getItem('user.access')
                this.user.refresh = localStorage.getItem('user.refresh')
                this.user.id = localStorage.getItem('user.id')
                this.user.name = localStorage.getItem('user.name')
                this.user.email = localStorage.getItem('user.email')
                this.user.isAuthenticated = true

                this.refreshToken()

                console.log('Initialized user:', this.user)
            }
        },

        
        setToken(data) {
            console.log('setToken', data)

            this.user.access = data.access
            this.user.refresh = data.refresh
            this.user.isAuthenticated = true


            localStorage.setItem('user.access', data.access)
            localStorage.setItem('user.refresh', data.refresh)
        },

        removeToken() {
            console.log('removeToken')

            this.user.refresh = null
            this.user.access = null
            this.user.isAuthenticated = false
            this.user.id = false
            this.user.name = false
            this.user.email = false

            localStorage.setItem('user.access', '')
            localStorage.setItem('user.refresh', '')
            localStorage.setItem('user.id', '')
            localStorage.setItem('user.name', '')
            localStorage.setItem('user.email', '')
        },

        setUserInfo(user) {
            console.log('setUserInfo', user)

            this.user.id = user.id
            this.user.name = user.name
            this.user.email = user.email
            this.user.role = user.role

            localStorage.setItem('user.id', this.user.id)
            localStorage.setItem('user.name', this.user.name)
            localStorage.setItem('user.email', this.user.email)
            localStorage.setItem('user.role', this.user.role)

            console.log('User', this.user)
        },

        refreshToken() {
            axios.post('/api/refresh/', {
                refresh: this.user.refresh
            })
                .then((response) => {
                    this.user.access = response.data.access

                    localStorage.setItem('user.access', response.data.access)

                    axios.defaults.headers.common["Authorization"] = "Bearer " + response.data.access
                })
                .catch((error) => {
                    console.log(error)

                    this.removeToken()
                })
        }
    },
})

LogIn.vue

<template>
    <div class="max-w-7xl max-h-screen h-[740px] mx-auto grid grid-cols-2 gap-24 mt-6 m-10">

        <div class="main-left">
            <div class="p-4 h-full">
                <div class="p-12 bg-hero-mutrah h-full rounded-lg bg-cover">
                </div>
            </div>
        </div>
        <div class="main-right">
            <div class="p-12 bg-white rounded-lg">
                <form class="space-y-6" v-on:submit.prevent="submitForm">
                    <div>
                        <label>Email</label>
                        <input type="email" v-model="form.email" placeholder="Your email address"
                            class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
                    </div>
                    <div>
                        <label>Password</label>
                        <input type="password" v-model="form.password" placeholder="Password"
                            class="w-full mt-2 py-4 px-6 border border-gray-200 rounded-lg">
                    </div>

                    <div>
                        <button class="py-4 px-6 bg-orange-500 font-bold text-white rounded-lg">Log In</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { useUserStore } from '@/stores/user'
import { useToastStore } from '@/stores/toast'

export default {

    setup() {
        const userStore = useUserStore()
        const toastStore = useToastStore()

        return {
            userStore,
            toastStore
        }
    },

    data() {
        return {
            form: {
                email: '',
                password: '',
            },
            errors: []
        }
    },

    methods: {
        async submitForm() {
            this.errors = []

            if (this.form.email === '') {
                this.errors.push('Your email is missing')
            }

            if (this.form.password === '') {
                this.errors.push('Your password is missing')
            }

            if (this.errors.length === 0) {
                await axios
                    .post('/api/login/', this.form)

                    .then(response => {
                        console.log({ 'message': response.data })
                        this.userStore.setToken(response.data)

                        axios.defaults.headers.common["Authorization"] = `Bearer ${response.data.access}`;

                    })
                    .catch(error => {
                        this.toastStore.showToast(5000, 'Oops we could not find matching credentials', 'bg-red-300')
                    })

                await axios
                    .get('/api/me/')
                    .then(response => {
                        console.log({ 'message': response })
                        this.userStore.setUserInfo(response.data)
                        this.userStore.initStore(response.data)

                        this.$router.push('/')

                    })
                    .catch(error => {
                        console.log('error', error)
                    })
            }

            else {
                if (this.errors == 'Your email is missing')
                    this.toastStore.showToast(5000, 'Your email is missing', 'bg-red-300')

                if (this.errors == 'Your password is missing')
                    this.toastStore.showToast(5000, 'Your password is missing', 'bg-red-300')
            }

        }
    },
}

</script>

This code is working as I have the correct expected behavior when the user is Logging in. But I would need to check the user role before each page and not only when logging in.

Any suggestion?

Thanks for taking the time to read!

Answer 1

It appears you're facing an issue with Vue 3 and Pinia regarding checking the user's role before navigating to each page. You're correct that the problem likely stems from the router being loaded before the user state is ready. To address this, you can use Vue Router's beforeEach navigation guard in conjunction with Pinia's store.

Here's a modified version of your code that should help you achieve the desired behavior:

1. Update your router configuration:

    import { createRouter, createWebHistory } from 'vue-router';
    import { useUserStore } from '@/stores/user';
    
    const router = createRouter({
      history: createWebHistory(import.meta.env.BASE_URL),
      routes: [
        {
          path: '/',
          name: 'home',
          component: HomeView
        },
        {
          path: '/about',
          name: 'about',
          component: AboutView
        },
        {
          path: '/:pathMatch(.*)*',
          name: 'NotFound',
          component: NotFoundView
        },
      ]
    });

    router.beforeEach(async (to, from, next) => {
      const store = useUserStore();
      await store.initStore(); // Make sure the user state is initialized.
    
      // Now, you can access the user's role and perform authorization checks.
      const userRole = store.user.role;
    
      // You can implement your authorization logic here.
      // For example, check if the userRole has access to the route.
      // You can also handle cases like redirecting to a login page if not authenticated.
    
      // For simplicity, let's assume all users can access all routes.
      // Replace this with your actual authorization logic.
      if (userRole !== null) {
        next(); // Allow navigation.
      } else {
        // Redirect to a login page or show an unauthorized message.
        // Modify this according to your application's requirements.
        next('/login'); // Redirect to a login page if the user's role is not defined.
      }
    });
    
    export default router;

Update your user.js store: In your user.js store, it seems you have an initStore action to initialize the user state. You can call this action when your app starts to ensure the user state is initialized before any route navigation.

    // user.js
    
    import { defineStore } from 'pinia';
    import axios from 'axios';
    
    export const useUserStore = defineStore('user', {
      // ... (your existing state and actions)
    
      actions: {
        initStore() {
          if (localStorage.getItem('user.access')) {
            // ... (your existing code to initialize the user state)
          }
        }
      }
    });

By following these steps, your Vue 3 application should now properly check the user's role before each page navigation, even after logging in. Remember to replace the placeholder logic in the router.beforeEach guard with your actual authorization checks based on user roles.