Vue-Router 구성 요소에서 Vue-Cookies를 작동시키는 방법

Vue-Router 구성 요소에서 Vue-Cookies를 작동시키는 방법

Vue, Vue-Router 및 Vue-Cookies를 이렇게 로드하는 라우터 인덱스.js 파일이 있다.

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,
    },
  ],
});

이후 쿠키가 설정되었는지 여부를 확인하고 있다.

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(이러한 경우)가 표시됨.그것은 또한 '정의되지 않은' 상태로 반환된다.

      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만드는 라우터에 정의되지 않음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()
    }
},

해결책은 '이것' 모두를 바꾸는 것이었다.'불가득'은 '불가득'의 대상이다.이렇게 '$$$' 입니다.

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

참조URL: https://stackoverflow.com/questions/51789200/how-do-i-get-vue-cookies-to-work-in-vue-router-component