访问令牌未在后续请求中传递Laravel 和 Vue SPA 的 websanova/vue-auth

问题描述

几个小时以来，我一直把头撞在墙上，我希望有人能帮助我完成 websanova/vue-auth library 的设置，以便我的 Vue SPA 可以针对我的 api 端点进行身份验证。

我的意思是，我正在 Vue 中执行登录 (this.$auth.login()) 并且它成功进行了身份验证，但是当它随后尝试立即提取用户信息时，该 api 调用失败并显示 401错误代码。这是有道理的，因为从我通过检查 http 调用可以看出，它不会在第二个请求中传递承载身份验证标头。但我的理解是，如果我将承载驱动程序用于 vue-auth，那么传递承载头实际上就是它的主要功能。

一些环境信息：

Laravel 8.13.0
Vue 2.6.12
@websanova/vue-auth@4.1.2（配置为使用 axios，而不是 Vue 资源）
Laravel Passport 10.1（我的 api 端点由它保护）

这是目前的状态：

我知道 Laravel Passport 和 api 端点身份验证工作正常，因为如果我获取登录调用返回的访问令牌并使用它向用于通过 Postman 提取用户信息的端点发出手动请求，它就可以工作.
我认为 CORS 不是问题，因为前端和后端在同一个域中。
我知道 vue-auth 已安装并且至少部分运行，因为它确实尝试登录。如果我禁用 fetchUser 参数，它似乎确实会在成功登录后尝试重定向。
我根据 Vue 2 examples in the project documentation here 和 the configs in the 2.x sample app 以及我遵循的一些教程一遍又一遍地检查了我的 vue-auth 设置like this，{ {3}}，and this，但我的想法已经用完了。

我目前的理论是：

也许我没有正确调用或初始化承载驱动程序，因此它可以执行各种调用，但没有尝试在任何 http 调用中添加承载令牌(?)
也许登录正在返回访问令牌，但它没有被存储/捕获，所以当它进行后续调用时，它找不到它并因此将标题留在外面（？）（我没有看到cookie 中的访问令牌、本地存储或浏览器中的会话存储）
我使用的是自签名 SSL 证书，不确定浏览器是否会不喜欢它(?)
我目前还没有任何东西来处理令牌刷新。不确定这是否是目前的问题？
在 vue-auth 选项的 plugins 部分中指示使用“Vue.router”作为路由器属性的说明，但是当我尝试这样做时，它说它是未定义的，所以这可能是一个麻烦的根源。（但我引用了主要的 VueRouter，它似乎没有抛出任何错误）

这是我的 vue 和 vue-auth 配置：

import App from './App.vue';
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios,axios);

import VueRouter from 'vue-router';

// From https://websanova.com/docs/vue-auth/guides/startup
// Also tried the other 2.x variation on that page.
// Also tried the ones here with no difference: https://github.com/websanova/vue-auth/blob/master/demos/2.x/src/config/plugins.js
import auth                  from '@websanova/vue-auth/dist/v2/vue-auth.esm.js';
import driverAuthBearer      from '@websanova/vue-auth/dist/drivers/auth/bearer.esm.js';
import driverHttpaxios       from '@websanova/vue-auth/dist/drivers/http/axios.1.x.esm.js';
import driverRouterVueRouter from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.esm.js';

window.Vue = require('vue');

import {routes} from './routes';
import Vuelidate from 'vuelidate'

Vue.use(VueRouter);
Vue.use(Vuelidate);

const router = new VueRouter({
    mode: 'history',base: '/app/',routes: routes
});

// From https://github.com/websanova/vue-auth/blob/master/demos/2.x/src/config/plugins.js

Vue.use(auth,{
    plugins: {
        http: Vue.axios,// Axios
        router: router,},drivers: {
        auth: driverAuthBearer,http: driverHttpaxios,router: driverRouterVueRouter,oauth2: {

        }
    },options: {
        registerData: {url: '/api/register',method: 'POST',redirect: '/login'},loginData: {url: '/api/login',redirect: '',fetchUser: true},logoutData: {url: '/api/logout',redirect: '/',makeRequest: true},fetchData: {url: '/api/users/me',method: 'GET',enabled: true},refreshData: {url: '/api/refresh',enabled: true,interval: 30},rolesKey: 'type',notFoundRedirect: {name: 'user-account'},});

这是我的登录页面中的登录方法：

login() {
            // get the redirect object
            var redirect = this.$auth.redirect()
            var app = this

            this.$auth
                .login({
                    data: {
                        email: app.email,password: app.password
                    },redirect: {name: 'home'},rememberMe: true,staySignedIn: true,fetchUser: true
                });
}

如果有人能发现我可能遗漏的任何内容，将不胜感激！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

laravel laravel vue-auth vue.js