如何在React js前端的cookie中存储承载令牌

编程问答 2022-06-13

问题描述

我在代码的前端使用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');
}

解决方法

首先，在这一行：

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

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

第二，有一些用于管理cookie的软件包。我想到的是：

Link to GitHub "Universal Cookie" repo

不过，您可以使用普通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由用分号分隔的键/值对组成。因此，上面获取“ Bearer”值的代码，首先获取Cookie，将其拆分为键/值对，找到键为“ Bearer”的行，并将该行拆分为Bearer令牌。

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

它将是这样的：

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

但是，我没有您的数据形状，因此您只能自己完成最后一部分。

bearer-tokencookiescookiesjwtjwtreactjsreactjsreactjsreactjs