Vue.js + REST api 中的身份验证流程

Posted 2023-02-22

【中文标题】Vue.js + REST api 中的身份验证流程

【英文标题】：Authentication flow in Vue.js + REST api

【发布时间】：2020-04-23 11:15:24

【问题描述】：

我正在使用 vue cli 和 adonis.js 构建一个项目。 前端将仅使用 Vue.js，后端将仅提供 REST api。 我将使用 jwt 进行身份验证。问题是，我不了解 jwt 的身份验证流程。我最近从 Laravel 迁移到了 adonis，所以对 Vue + Ajax + REST api 了解甚少。以下是我的问题：

是否必须在每个 Ajax 请求中发送令牌？

如何获取与给定 jwt 令牌关联的当前用户？

什么是 refreshToken？

提供详细指南的链接就足够了。

【参考方案1】：

是否必须在每个 Ajax 请求中发送令牌？

是的，客户端必须发送他的令牌（登录成功后的 getter）才能访问安全资源。

如何获取与给定 jwt 令牌关联的当前用户？

JWT 有一个 «sub» 属性，例如，您可以在其中保存用户的 id。

什么是 refreshToken？

当客户端令牌过期时，您必须提供一个新的，无需再次登录。

这里是 nodejs 的指南：https://www.codementor.io/@olatundegaruba/5-steps-to-authenticating-node-js-with-jwt-7ahb5dmyr

【讨论】：

当前用户 -> 这是一个带有 AdonisJS 的 JWT 令牌：jwt.io/…。 uid字段代表用户的id

感谢您的友好回复。我想要一种在阿多尼斯中做这些事情的正确方法。

让我们continue this discussion in chat.

【参考方案2】：

完成@ljcordero的回答

阿多尼斯方面：

您可以使用auth 对象获取用户。喜欢：

async example ( auth, request ) 
    const user = await auth.getUser()
    ...

Complete documentation 的auth。

VueJS 方面：

Adonis 创建的令牌包含一个UID 字段。它代表用户的id。

这是一个示例令牌：