Vue-Cookies 无法获取 Cookie

Question

I am trying to setup an OAuth service from my Node.js back-end to my Vue front-end. Currently, the back-end appears to be working correctly; I am able to authenticate successfully with my google account and then am redirected to the appropriate UI View upon authentication. The cookie is also being stored.

• My node service is running on localhost:3000
• My Vue UI is running on localhost:8080

I can access the cookie using document.cookie , and it shows:

"express:sess=<Data here>; express:sess.sig=<Data here>"

The problem is that I am using vue-cookies , and can't retrieve the cookie using window.$cookies.get(...);

In my main.js file I am importing vue-cookies:

import VueCookies from "vue-cookies";
Vue.use(VueCookies);
window.$cookies.config("7D", "", "localhost");

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount("#app");

Here is my router/index.js where I am using that code:

import Vue from "vue";

...
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    debugger;
    if (!window.$cookies) {
      next({
        path: "/login",
        params: { nextUrl: to.fullPath }
      });
    } else {
      const cookie = window.$cookies;
      if (to.matched.some(record => record.meta.isAdmin)) {
        if (cookie.isAdmin) {
          next();
        } else {
          next({
            path: "/login",
            params: { nextUrl: to.fullPath }
          });
        }
      } else {
        next();
      }
    }
  } else {
    next();
  }
});

If I try to log window.$cookies.get("express:sess") , it returns null . Not sure what I am doing wrong. I know that window.$cookies is defined from the console as well, because I can see all the methods/properties on that object.

If I create a cookie from the developer tools, with a name of "test", I can retrieve it:

> window.$cookies.get("test")
> "value"

EDIT :

If I change the cookie that I manually create to have a name of test:test , the output is null! Does the : character have something to do with why I can't retrieve the cookie??

> window.$cookies.get("test:test")
> null

EDIT 2: I can do the following and see the cookies are there, but cannot access them for some reason.

window.$cookies.keys()
(3) […]
​
0: "express:sess"
​
1: "express:sess.sig"
​
2: "test"
​
length: 3

Answer 1

Your problem relies on how vue-cookie manages cookies. if you take a look a the set method you can see that vue-cookie encodes your values before storing the cookie.

Example:

let's say you store a cookie using vue-cookie:

$cookies.set('express:sess')

this will store the name of the cookie as express%3Asess which is the result of encodeURIComponent('express:sess')

I recommend using a different library or just using native browser API's