Vue-Cookies 无法获取 Cookie

Question

我正在尝试设置从我的 Node.js 后端到我的 Vue 前端的 OAuth 服务。目前，后端似乎工作正常；我能够使用我的 google 帐户成功进行身份验证，然后在身份验证后重定向到相应的 UI 视图。 cookie 也正在存储中。

• 我的节点服务在 localhost:3000 上运行
• 我的 Vue UI 在 localhost:8080 上运行

我可以使用 document.cookie，它显示：

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

问题是我使用vue-cookies，无法使用window.$cookies.get(...);检索cookie

在我的main.js 文件中，我正在导入 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");

这是我使用该代码的router/index.js：

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();
  }
});

如果我尝试记录window.$cookies.get("express:sess")，它会返回null。不知道我做错了什么。我知道window.$cookies 也是从控制台定义的，因为我可以看到该对象的所有方法/属性。

如果我从开发者工具创建一个名为“test”的 cookie，我可以检索它：

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

编辑：

如果我将手动创建的 cookie 更改为名称为 test:test，则输出为空！ : 字符是否与我无法检索 cookie 的原因有关？？

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

编辑 2： 我可以执行以下操作并查看 cookie 存在，但由于某种原因无法访问它们。

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

Answer 1

您的问题取决于 vue-cookie 如何管理 cookie。如果你看一下set method，你会看到 vue-cookie 在存储 cookie 之前对你的值进行了编码。

示例：

假设你使用 vue-cookie 存储一个 cookie：

$cookies.set('express:sess')

这会将cookie的名称存储为express%3Asess 这是encodeURIComponent('express:sess')的结果

我建议使用其他库或仅使用本机浏览器 API