[英]Vue-Auth : Cannot read property 'beforeEach' of undefined
I'm trying to use my SPA VueJS with a Laravel API.我正在尝试将我的 SPA VueJS 与 Laravel API 一起使用。
For handling the role based authentication, I've found the plugin vue-auth:为了处理基于角色的身份验证,我找到了插件 vue-auth:
Github: https://github.com/websanova/vue-auth Github: https://github.com/websanova/vue-auth
Documentation: https://websanova.com/docs/vue-auth/home文档: https://websanova.com/docs/vue-auth/home
This plugin looks great since it looks to fit my needs, but I can't implement it on my app.这个插件看起来很棒,因为它看起来很适合我的需求,但我无法在我的应用程序上实现它。
import Vue from 'vue';
import auth from '@websanova/vue-auth';
import authBearer from '@websanova/vue-auth/drivers/auth/bearer.js';
import httpAxios from '@websanova/vue-auth/drivers/http/axios.1.x.js';
import routerVueRouter from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.js';
Vue.use(auth, {
auth: authBearer,
http: httpAxios,
router: routerVueRouter,
rolesKey: 'role'
});
When I try to use my application, I have this error message in my console:当我尝试使用我的应用程序时,我的控制台中出现以下错误消息:
Uncaught TypeError: Cannot read property 'beforeEach' of undefined
at Auth.beforeEach
at _initInterceptors
at new Auth
And fun fact, when I change my http driver to vue-resource (following the documentation), I have another error:有趣的是,当我将 http 驱动程序更改为 vue-resource 时(按照文档),我遇到了另一个错误:
Uncaught TypeError: Cannot read property 'interceptors' of undefined
at Auth.interceptor
at _initInterceptors
at new Auth
I'm stuck since a few hours now, and I've searched everywhere on internet with no solutions working.几个小时后我就被困住了,我在互联网上到处搜索,没有任何解决方案有效。
Thanks a lot for reading非常感谢阅读
In my way i use laravel auth method like JWT or Passport to handling the role based authentication and vue you can use beforeEach
in router for example:以我的方式,我使用 laravel auth 方法,如 JWT 或 Passport 来处理基于角色的身份验证和 vue,您可以在路由器中使用
beforeEach
例如:
router.beforeEach((to, from, next) => {
if (to.path == '/login') {
next();
} else {
store.commit('setLoading', true);
store.dispatch('checkAuth').then(r => {
store.commit('setUser', r.data);
next();
}).catch(e => next('/login?redirect=' + to.path)).finally(() => {
store.commit('setLoading', false);
})
}
})
I change this by put the const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })
before beforeEach
我通过在 beforeEach 之前放置
const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })
beforeEach
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.