如何解决访问令牌未在后续请求中传递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 举报,一经查实,本站将立刻删除。