问题标签 [vue-auth]

将vue-auth（GitHub 上的 vue-auth）与 Axios HTTP 驱动程序一起使用，我在浏览器控制台中收到以下错误：

TypeError: this.Vue.axios is undefined

main.js

./libs/vue-auth.js

Vue.axios = axios;乍一看，删除评论似乎有效。所以我想搬到Vue.axios = axios;那里，main.js但又一次它不起作用。

我正在使用 vuex 进行状态管理这是我的 vuex 代码，

这里我的逻辑是，如果令牌存在于本地存储中，那么它将设置 isAuthenticated 为 true，这样就可以很容易地检查路由。但是有些它是如何不起作用的。

这是我的路由器代码

目前，如果我登录仍然可以进入登录页面，甚至可以在没有身份验证的情况下进入仪表板。

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

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

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

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

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

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

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

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

非常感谢阅读

对于身份验证，我使用vue-auth@^3.2.0-betaaxios HTTP 驱动程序。axios 本身在 0.19.2 上。

示例代码

如果用户提供的凭据无效，服务器会以 401 响应并显示错误消息。这是正常工作的。

但是，在检查控制台时，我会看到以下错误消息。它似乎没有任何“功能后果”，但我想知道为什么会抛出这个错误。虽然我知道肯定有一些未兑现的承诺，但我不知道那可能在哪里。

我正在尝试使用 Vue.js 和 Laravel 作为后端来创建 SPA。我tymon/jwt-auth在后端使用 JWT 身份验证。

我在我的 Login.vue 中找不到 $auth。

我像这样在我的 app.js 中包含了@websanova/vue-auth

但这给了我Uncaught TypeError: vue.reactive is not a function

我按照@websanova/vue-auth 站点的指示遵循了最新的实施

我还尝试了一些旧教程this和this使用 v2 包，但在这种情况下 this.$auth 在 Login.vue 中未定义

这是我完整的app.js和Login.vue

我正在使用vue-auth 插件在我的 Vue.js 前端处理用户身份验证。在路由（使用 vue-router）中，插件允许您将元数据传递给路由，说明用户是否需要通过身份验证才能访问该路由（以及它的子路由），如下所示：

而且效果很好，在此示例中，如果用户未通过身份验证，则页面会为 painel 视图引发 401 错误并重定向到登录。

我想要的是能够在会话过期时自动将用户重定向到登录页面。现在，如果我刷新页面，它只会将用户重定向到登录页面，否则用户仍然可以四处漫游，虽然从 API 获得一堆 401 错误），但仍然可以在我的 SPA 应用程序中导航。有谁知道如何做到这一点？

我已经把头撞在墙上好几个小时了，我希望有人可以帮助我完成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 配置：

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

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