Vue - печенье не может получить печенье

Question

Я пытаюсь настроить службу OAuth от моего Node.js бэкэнда до моего Vue фронтэнда. В настоящее время бэкэнд работает правильно; Я могу успешно пройти проверку подлинности с помощью своей учетной записи Google, а затем после проверки подлинности перенаправляется в соответствующий пользовательский интерфейс. Повар ie также сохраняется.

• Служба моего узла работает на localhost: 3000
• My Vue Пользовательский интерфейс работает на локальном хосте: 8080

Я могу получить доступ к повару ie, используя document.cookie, и он показывает:

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

Проблема в том, что я Я использую vue -дерево и не могу получить повара ie, используя window.$cookies.get(...);

В моем файле main.js я импортирую vue -печи:

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 также определяется из консоли, потому что я могу видеть все методы / свойства этого объекта.

Если я создаю повар ie из инструментов разработчика, с именем "тест", я могу получить его:

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

РЕДАКТИРОВАТЬ :

Если я изменю повар ie, который я создаю вручную чтобы иметь имя test:test, вывод будет нулевым! Имеет ли персонаж : какое-то отношение к тому, почему я не могу найти повара ie ??

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

РЕДАКТИРОВАТЬ 2: Я могу сделать следующее и посмотреть куки есть, но по какой-то причине не могут получить к ним доступ.

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

Answer 1

Ваша проблема связана с тем, как vue -cook ie управляет файлами cookie. если вы посмотрите метод set , вы увидите, что vue -cook ie кодирует ваши значения перед сохранением повара ie.

Пример:

допустим, вы сохраняете повара ie, используя vue -cook ie:

$cookies.set('express:sess')

, в котором имя повара ie будет храниться как express%3Asess который является результатом encodeURIComponent('express:sess')

Я рекомендую использовать другую библиотеку или просто использовать нативный API браузера