Vue-Cookies 無法獲取 Cookie

Question

我正在嘗試從我的 Node.js 后端到我的 Vue 前端設置 OAuth 服務。 目前，后端似乎工作正常； 我能夠使用我的 google 帳戶成功進行身份驗證，然后在身份驗證后重定向到相應的 UI 視圖。 cookie 也正在存儲。

• 我的節點服務在 localhost:3000 上運行
• 我的 Vue UI 在 localhost:8080 上運行

我可以使用document.cookie訪問 cookie，它顯示：

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

問題是我正在使用vue-cookies ，並且無法使用window.$cookies.get(...);檢索cookie window.$cookies.get(...);

在我的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 方法，您可以看到 vue-cookie 在存儲 cookie 之前對您的值進行編碼。

例子：

假設您使用 vue-cookie 存儲 cookie：

$cookies.set('express:sess')

這會將 cookie 的名稱存儲為express%3Asess ，這是encodeURIComponent('express:sess')

我建議使用不同的庫或僅使用本機瀏覽器 API