时间戳

首页 > 解决方案 > 如何在反应js前端的cookie中存储不记名令牌

reactjs - 如何在反应js前端的cookie中存储不记名令牌

问题描述

我在代码的前端部分使用 React JS。我想将不记名令牌存储在 cookie 中，然后在成功调用 API 时在内容字段中返回不记名令牌。由于我之前没有使用过 cookie，所以想知道如何完成这项任务。后端部分也不是我做的。以下是我调用 API 的代码

onSubmitSignup = () => {
    fetch('https://cors-anywhere.herokuapp.com/http://35.154.16.105:8080/signup/checkMobile',{
        method:'post',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({
            mobile:this.state.mobile
        })
    })
    .then(response => response.json())
    .then(data =>{
        if(data.statusCode === '2000'){
            localStorage.setItem('mobile',this.state.mobile);
            // this.props.loadNewUser(this.state.mobile);
            this.props.onRouteChange('otp','nonav');
        }
    })
    // this.props.onRouteChange('otp','nonav');
}

标签： reactjscookiesjwtbearer-token

解决方案

首先，在这一行：

if(data.statusCode === '2000'){

你确定状态码不应该是 200 而不是 2000。

其次，有一些用于管理 cookie 的包。浮现在脑海中的是：

链接到 GitHub “通用 Cookie” 存储库

但是您可以使用 vanilla js 来管理 cookie，更多信息可以在 Mozilla 网站上找到：

这里

当您进行初始 API 调用时，在返回的数据中，我假设不记名令牌也被返回。像这样初始化cookie：

document.cookie = "Bearer=example-bearer-token;"

当您以后需要访问 cookie 时，您可以使用以下代码：

const cookieValue = document.cookie
  .split('; ')
  .find(row => row.startsWith('Bearer'))
  .split('=')[1];

然后通过下一个呼叫转发承载。

编辑

像这样设置 cookie 持有者令牌：

document.cookie = "Bearer=example-bearer-token;"

像这样获取 cookie 持有者令牌：

const cookieValue = document.cookie
.split('; ')
.find(row => row.startsWith('Bearer'))
.split('=')[1];

cookie 由以分号分隔的键/值对组成。因此，上面获取“Bearer”值的代码首先获取 cookie，将其拆分为键/值对，找到键为“Bearer”的行并拆分该行以获得 Bearer 令牌。

在您的评论中，您说开发团队说承载者将在“内容”中。在您的 ajax 请求中，您已经可以通过数据访问该内容。您需要调试该请求以找出它返回的内容。我假设您只需要从检查您的 statusCode 的“If”块内的返回数据中获取令牌。

它会是这样的：

document.cookie = "Bearer=" + data.bearer;

但是，我没有你的数据的形状，所以你只能自己完成最后一部分。

推荐阅读