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

Question

我在代码的前端部分使用 React JS。我想将不记名令牌存储在 cookie 中，然后 return 在成功调用 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');
}

Answer 1

首先，在这一行：

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

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

其次，有管理cookies的包。我想到的一个是：

Link to GitHub "Universal Cookie" repo

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

Here

当您进行初始 API 调用时，在返回的数据中，我假设 Bearer 令牌也已返回。像这样初始化 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 由 key/value 对组成，由 semi-colon 分隔。因此，上面获取“Bearer”值的代码首先获取 cookie，将其拆分为 key/value 对，找到具有“Bearer”键的行并将该行拆分以获得 Bearer 令牌。

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

它将是这样的：

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

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

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

how to store bearer token in cookies in react js frontend

cookies

jwt

reactjs

bearer-token

编辑