Vue-Auth：无法读取未定义的属性“beforeEach”答案

【问题标题】：Vue-Auth : Cannot read property 'beforeEach' of undefinedVue-Auth：无法读取未定义的属性“beforeEach”
【发布时间】：2020-10-28 08:12:33
【问题描述】：

我正在尝试将我的 SPA VueJS 与 Laravel API 一起使用。

为了处理基于角色的身份验证，我找到了插件 vue-auth ：

Github：https://github.com/websanova/vue-auth

文档：https://websanova.com/docs/vue-auth/home

这个插件看起来很棒，因为它看起来很适合我的需求，但我无法在我的应用上实现它。

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

当我尝试使用我的应用程序时，我的控制台中出现以下错误消息：

Uncaught TypeError: Cannot read property 'beforeEach' of undefined
at Auth.beforeEach
at _initInterceptors
at new Auth

有趣的是，当我将 http 驱动程序更改为 vue-resource（按照文档）时，我遇到了另一个错误：

Uncaught TypeError: Cannot read property 'interceptors' of undefined
at Auth.interceptor
at _initInterceptors
at new Auth

我已经被困了几个小时了，我在互联网上到处搜索，没有任何解决方案。

非常感谢阅读

【问题讨论】：

在第一个错误中，您似乎没有通过路线，这就是它们未定义的原因
是的，但我正在关注文档，所以我不明白为什么它没有到达路线

标签： javascript vue.js vuejs2 vue-auth

【解决方案1】：

以我的方式，我使用 JWT 或 Passport 之类的 laravel 身份验证方法来处理基于角色的身份验证和 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);
        })
    }
})

【讨论】：

【解决方案2】：

我通过将const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) 放在beforeEach 之前来更改此设置

【讨论】：