Search code examples
vue.jscookiesvuexvuejs3vue-cookies

Vue 3 with vue3-cookies sets same cookies to different locations on variable routes

I loading saved in cookies user authorization data when my Vue 3 application mount. Data in json format like Jwt and Refresh tokens & something user data.

I have setup like:

main.js:

import VueCookies from 'vue3-cookies'
...
app.use(VueCookies, {
    expireTimes: "365d",
    path: "/"
})

In (vuex) store: auth.module.js:

I have things like this:

import { useCookies } from "vue3-cookies"
...
// in getters
const auth = cookies.get('auth')
// and in mutations
cookies.set('auth', auth)

And in router I have:

const routes = [
...
{
    path: '/user/:id',
    name: 'user',
    props: true,
    component: () => import('@/views/UserView.vue'),
    meta: {
        requiresAuth: true,
        availableRoles: [ "Admin" ]
    }
},
...
]
...
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

So, the problem is, that when I load the location like:

https://[url]/user/new

Or

https://[url]/user/1

I got duplicated cookies. enter image description here enter image description here enter image description here

First auth cookie path is /user and its empty. Second auth cookie path is / and it's ok.

Problem appears only on this route, and IDN why...

Seems like strange bug, do you have same issues?

Solution

  • If I going to route like:

    <router-link to=`/user/{user.id}`>

    Then issue occurs.
    But, If I going to route like:

    <router-link :to="{ name: 'user', params: { id: String(user?.id) } }">

    That's fine. Strange behavior.