Как заставить vue-cookies работать в компоненте vue-router

У меня есть файл index.js маршрутизатора, который загружает Vue, Vue-Router и Vue-Cookies следующим образом:

import Vue from 'vue';
import Router from 'vue-router';
import VueCookies from 'vue-cookies';

Vue.use(Router);
Vue.use(VueCookies);

Затем я определяю все свои маршруты следующим образом:

const router = new Router({
  routes: [
    {
      path: '*',
      name: 'erorr',
      secure: false,
      component: error404,
    },
    {
      path: '/',
      name: 'Home',
      secure: false,
      component: home,
    },
    {
      path: '/clp',
      name: 'CLP',
      secure: true,
      component: clpHome,
    },
    {
      path: '/saml/login',
      name: 'samlLogin',
      secure: false,
      component: samlLogin,
    },
    {
      path: '/saml/logout',
      name: 'samlLogout',
      secure: false,
      component: samlLogout,
    },
    {
      path: '/user/profile',
      name: 'userProfile',
      secure: false,
      component: userProfile,
    },
  ],
});

После этого он проверяет, установлен ли файл cookie:

router.beforeEach((to, from, next) => {
  // Look at all routes
  router.options.routes.forEach((route) => {
    // If this is the current route and it's secure
    if (((to.matched[0].path === route.path || to.matched[0].path === '')/* && route.path === '/'*/) && route.secure) {
      // Check if there's a cookie and verify it
      // Check if user has cookie "SAMLSession"

Здесь появляется сообщение об ошибке «TypeError: невозможно прочитать свойство isKey из undefined», когда я пытаюсь console.log (это. $ cookies); он также возвращается undefined.

      if (this.$cookies.isKey('SAMLSession')) {
        // Sets the value of "SAMLSession" cookie to a variable
        const sessionId = this.$cookies.get('SAMLSession');
        // Runs function checkSaml located above, then once that completes....
        checkSaml(sessionId).then(result => {
          // Check if the session id is valid via Express, noted by a response of "OK" if good, and "BAD!" if not valid
          if (result.data === 'OK') {
            // If it's good, allow the user to see the page
            next();
          } else {
            // If it's not valid, set a cookie of the page the user was trying to access and then sign them in
            this.$cookies.set('referLocation', to.path, Infinity, '/');
            next('/saml/login');
          }
        });
      } else {
        // If it's not a cookie, set a cookie of the page the user was trying to access and then sign them in
        this.$cookies.set('referLocation', to.path, Infinity, '/');
        next('/saml/login');
      }
    }
  });
  // If nothing has happened, allow the user to visit the page
  next();
});

Эта конфигурация работала несколько дней назад, и теперь она не загружает VueCookies. Любые советы по устранению неполадок будут оценены.

Ваши настройки выглядят правильно. this.$cookies должен предоставить вашим компонентам доступ к методам vue-cookies. Возможно, ваш каталог node_modules был поврежден. Восстановите или соберите dist. Вам не нужно использовать window.

colm.anseo 10.03.2019 17:42
2
1
18 077
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Решением было заменить все объекты this. $ Cookies на window. $ Cookies следующим образом:

router.beforeEach((to, from, next) => {
  // Look at all routes
  router.options.routes.forEach((route) => {
    // If this is the current route and it's secure
    if (((to.matched[0].path === route.path || to.matched[0].path === '') && route.path === '/') && route.secure) {
      // Check if there's a cookie and verify it
      // Check if user has cookie "SAMLSession"
      if (window.$cookies.isKey('SAMLSession')) {
        // Sets the value of "SAMLSession" cookie to a variable
        const sessionId = window.$cookies.get('SAMLSession');
        // Runs function checkSaml located above, then once that completes....
        checkSaml(sessionId).then(result => {
          // Check if the session id is valid via Express, noted by a response of "OK" if good, and "BAD!" if not valid
          if (result.data === 'OK') {
            // If it's good, allow the user to see the page
            next();
          } else {
            // If it's not valid, set a cookie of the page the user was trying to access and then sign them in
            window.$cookies.set('referLocation', to.path, Infinity, '/');
            next('/saml/login');
          }
        });
      } else {
        // If it's not a cookie, set a cookie of the page the user was trying to access and then sign them in
        window.$cookies.set('referLocation', to.path, Infinity, '/');
        next('/saml/login');
      }
    }
  });
  // If nothing has happened, allow the user to visit the page
  next();
});

использование window вместо механизмов Vue похоже на взлом.

colm.anseo 09.03.2019 21:58

Файл cookie устанавливается Express и передается во Vue через window в конечной точке next('/saml/login'). Когда cookie создается для аутентификации, это делается на сервере, затем передается вперед и проверяется при каждом запросе.

Marvin WordWeaver Parsons 13.03.2019 01:09

да, все еще кажется хакерским

kamatheuska 11.12.2020 15:46

Я столкнулся с той же проблемой, пытаясь понять, почему this не определен в маршрутизаторе, что вызывает ошибку this.$cookies.

Вот как я это сделал.

//add this in the router index.js
import Vue from 'vue'

И затем я могу получить доступ к переменной cookie из Vue

beforeEnter: (to, from, next) => {
    let access_token = Vue.cookie.get('access_token')
    if (access_token == null) {
        // user doesn't have access token, redirect to login
        next({ name: 'login' })
    }
    else {
        // user has access token, user can open the page
        next()
    }
},

Полезно знать, что переменная меняется на cookie вместо $cookie. Я пытался получить Vue.$cookie, но получал ноль. Спасибо.

DazBaldwin 11.10.2019 12:40

Я получаю "TypeError: не могу прочитать свойство" get "из undefined" Есть идеи?

Shujat Munawar 14.04.2020 14:11

@SHUJATMUNAWAR для этого есть 2 больших плагина. vue-cookie и vue-cookies Попробуйте использовать его, в зависимости от того, какой плагин вы используете, Vue.cookie или Vue. $ cookies

Christhofer Natalius 14.04.2020 14:47

Другие вопросы по теме