1

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

我的观点是我this.$auth.login()在 Vue 中执行登录 () 并且它正在成功进行身份验证，但是当它尝试在之后立即提取用户信息时，该 api 调用失败并出现 401 错误代码。这是有道理的，因为从我通过检查 http 调用可以看出，它没有在第二个请求中传递 Bearer 身份验证标头。但我的理解是，如果我将承载驱动程序用于 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 示例和2.x 示例应用程序中的配置以及我遵循的一些教程，一遍又一遍地检查了我的 vue-auth 设置，还有这个，还有这个，但我已经没有想法了。

我目前的理论是：

  • 也许我没有正确调用或初始化承载驱动程序，因此它可以进行各种调用，但没有尝试在任何 http 调用上添加承载令牌（？）
  • 也许登录正在返回访问令牌，但它没有被存储/捕获，所以当它进行后续调用时，它找不到它并将标头作为结果（？）（我没有看到访问令牌我浏览器中的 cookie、本地存储或会话存储）
  • 我在自签名 SSL 证书上运行，不确定浏览器是否不喜欢它（？）
  • 我目前还没有任何东西可以处理令牌刷新。目前不确定这是否是一个问题？
  • 指示在 vue-auth 选项的插件部分中使用“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', method: 'POST', redirect: '', fetchUser: true},
        logoutData: {url: '/api/logout', method: 'POST', redirect: '/', makeRequest: true},
        fetchData: {url: '/api/users/me', method: 'GET', enabled: true},
        refreshData: {url: '/api/refresh', method: 'GET', 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
                });
}

如果有人能发现我可能错过的任何东西，将不胜感激！

4

0 回答 0