在Reactjs前端使用访问令牌

2024-04-19 • 问答

我使用Nodejs，Expressjs，MongoDB和JWT制作了身份验证API。现在，我使用React-js做一个小的前端，它仅执行Sign-up和Sign-in。我集成了Sign-up，现在当我尝试将Sign-in与前端集成时，当我点击Sign-in端点时，我会获得访问令牌。我不知道如何使用访问令牌来认证用户。有人可以帮我吗？

{
    "id": "5f2bc55f5ea2f61fd8b26fcf","username": "wango","email": "wango@gmail.com","roles": [
        "user","admin"
    ],"accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVmMmJjNtvmNWVhMmY2MWZkOGIynmZjZiIsImlhdCI6MTU5Njc4ODgxOSwiZXhwIjoxNTk2ODc1MjE5fQ.NkGUSgQ237ifRSrPxtJCSG9W463SFy_VDGlfapNwr1U"
}

我已经附上了我用用户名和密码访问端点时得到的响应的代码片段。

您需要以某种方式在客户端本地存储访问令牌（cookie，localStorage，indexedDb）。您还需要一个刷新令牌来保持连续会话。我个人建议将JWT存储在http-only和secure Cookie中。然后，您将访问令牌附加为在每个受保护的端点处进行请求，

Authorization: Bearer {token}

标题（或每个请求，具体取决于您的后端配置）。

阿德里安·索拉尔奇克（Adrian Solarczyk）说了一切。因此，我以localStorage为例，登录后将令牌设置为本地存储。

 localStorage.setItem("accessToken",response.accessToken);

如果在发出请求之前使用提取，并假设您将其作为标头传递。您将需要获取存储在本地存储中的令牌。像这样。

 const accessToken = localStorage.getItem("accessToken");

现在，假设您要在每个请求中将其作为标头传递，就可以附加令牌。

const myHeaders = new Headers();
myHeaders.append('Content-Type','application/json');
myHeaders.append('Authorization',`Bearer ${accessToken}`);
fetch('url',{
method: 'whatevermethod',headers: myHeaders,})

如果愿意，可以使用Axios，但我希望这可以使您了解如何进行操作。因此，每当用户注销时，您都需要确保从本地存储中删除令牌。

 localStorage.removeItem("accessToken");

在Reactjs前端使用访问令牌

iCMS 回答：在Reactjs前端使用访问令牌

大家都在问