[英]How do I get Vue-Cookies to work in Vue-Router Component
I have a router index.js file that loads Vue, Vue-Router and Vue-Cookies like so: 我有一个路由器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);
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,
},
],
});
After this, it is checking to see if a cookie is set: 之后,将检查是否设置了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"
This is where the error pops up, "TypeError: Cannot read property 'isKey' of undefined" When I attempt to console.log(this.$cookies); 这是错误弹出的地方,“ TypeError:无法读取未定义的属性'isKey'”当我尝试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();
});
This configuration was working a few days ago, and now it is not loading VueCookies, Any advice in troubleshooting it would be appreciated. 该配置已在几天前开始工作,现在不加载VueCookies,有关解决问题的任何建议将不胜感激。
The solution was to change all of the 'this.$cookies' objects to 'window.$cookies' like this: 解决方案是将所有“ 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();
});
I was facing the same problem, trying to figure why this
is undefined in router which makes this.$cookies
error. 我正面临同样的问题,试图找出为什么
this
路由器使得未定义this.$cookies
错误。
Here is how I did it. 这是我的方法。
//add this in the router index.js
import Vue from 'vue'
And then, I can access cookie
variable from Vue
然后,我可以从
Vue
访问cookie
变量
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()
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.