如何让 Vue-Cookies 在 Vue-Router 组件中工作 [英] How do I get Vue-Cookies to work in Vue-Router Component

问题描述

我有一个像这样加载 Vue、Vue-Router 和 Vue-Cookies 的路由器 index.js 文件:

I have a router index.js file that loads Vue, Vue-Router and Vue-Cookies like so:

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

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

然后我像这样定义我的所有路线:

I then define all of my routes like this:

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:

After this, it is checking to see if a cookie is set:

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’"当我尝试console.log(this.$cookies);它也返回未定义".

This is where the error pops up, "TypeError: Cannot read property 'isKey' of undefined" When I attempt to console.log(this.$cookies); it is returned 'undefined' as well.

      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 configuration was working a few days ago, and now it is not loading VueCookies, Any advice in troubleshooting it would be appreciated.

推荐答案

解决方案是将所有 'this.$cookies' 对象更改为 'window.$cookies'，如下所示:

The solution was to change all of the 'this.$cookies' objects to 'window.$cookies' like this:

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

这篇关于如何让 Vue-Cookies 在 Vue-Router 组件中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！