Javascript 如何在ReactJS中存储下一个会话的cookie以实现注册功能。谁能给我一些建议吗？

如何在ReactJS中存储下一个会话的cookie以实现登录功能。谁能给我一些建议吗？下面是我登录页面的代码。基本上，我正在尝试做的是，用户可以单击“记住我”框，该数据将在下次存储。每次用户不必在单击“记住我”框后输入详细信息

import React, {Component} from "react";
import axios from 'axios';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import {SignUp} from "./SignUp";
import {ForgotPassword} from "./ForgotPassword";

export class SignIn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     fields: {},
     errors: {},
     remember_me: false
    }
    this.onSubmit = this.onSubmit.bind(this);
  }

  handleValidation(){
    let fields = this.state.fields;
    let errors = {};
    let formIsValid = true;

    //Email
    if(!fields["email"]){
     formIsValid = false;
     errors["email"] = "Email ID is required";
    }

   //Password
   if(!fields["password"]){
      formIsValid = false;
      errors["password"] = "Password is required";
   }

   this.setState({errors: errors});
   return formIsValid;
 }

 onSubmit(e){
   e.preventDefault();
   if(this.state.fields["remember_me"]){
     var Cookies = this.state.fields;
     console.log(Cookies);
   }
  if(this.handleValidation()){
    var apiBaseUrl = "http://rediy-dev.railsfactory.com/";
    var input = this.state.fields;
    axios.post(apiBaseUrl+'/api/v1/sessions/login', input)
    .then(function (response) {
       console.log(response);
       if(response.data.status == 200){
         console.log("Login successful");
         alert("Login successful");
       }
       else if(response.data.status == 422){
         console.log("Invalid user details. Please enter again");
         alert("Invalid user details. Please enter again");
       }
     })
     .catch(function (error) {
       console.log(error);
     });
   }
  }

  onChange(field, e){
    let fields = this.state.fields;
    fields[field] = e.target.value;
    this.setState({fields});
  }


  render() {
    return (
      <div id="login" className="form-popup" role="dialog">
        <div className="modal-dialog">
          <div className="modal-content">
            <form className="form-theme text-left">
              <div className="modal-header">
                <button type="button" className="close" data-dismiss="modal">&times;</button>
                <h1 className="theme-title text-center">Sign In</h1>
              </div>
              <div className="modal-body">
                <div className="row">
                  <div className="col-sm-12">
                    <div className="form-group input">
                      <input
                        value={this.state.fields["email"]}
                        onChange={this.onChange.bind(this, "email")}
                        className="form-control input__field"
                        type="text"
                        id="unit"
                        refs="email"
                        placeholder="Email Id *"
                      />
                      <span style={{color: "red"}}>{this.state.errors["email"]}</span>
                    </div>
                  </div>
                  <div className="col-sm-12">
                    <div className="form-group input">
                      <input
                        value={this.state.fields["password"]}
                        onChange={this.onChange.bind(this, "password")}
                        className="form-control input__field"
                        type="text"
                        id="unit"
                        refs="password"
                        placeholder="Password *"
                      />
                      <span style={{color: "red"}}>{this.state.errors["password"]}</span>
                    </div>
                  </div>
                  <div className="col-sm-6">
                    <div className="forgot-password">
                      <p> <Link to="/ForgotPassword">Forgot your password</Link></p>
                    </div>
                  </div>
                  <div className="col-sm-6">
                    <div className="register">
                      <p>New User? <Link to="/SignUp">Register</Link></p>
                    </div>
                  </div>
                  <div className="col-sm-12">
                    <div className="checkbox checkbox-primary">
                      <input
                        refs="remember_me"
                        value={true}
                        onChange={this.onChange.bind(this, "remember_me")}
                        id="checkbox1"
                        type="checkbox" />
                      <label htmlFor="checkbox1">
                        Remember Me
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              <div className="modal-footer">
                <div className="btn-wrap">
                  <button type="submit" className="btn btn-theme save btn btn-primary" onClick={this.onSubmit}>Sign In</button>
                  <button type="submit" className="btn btn-theme btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

import React，{Component}来自“React”；
从“axios”导入axios；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“/SignUp”导入{SignUp}；
从“/ForgotPassword”导入{ForgotPassword}；
导出类签名扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
字段：{}，
错误：{}，
记住我：错
}
this.onSubmit=this.onSubmit.bind（this）；
}
手推车（）{
让fields=this.state.fields；
让错误={}；
让formIsValid=true；
//电子邮件
如果（！字段[“电子邮件”]）{
formIsValid=false；
错误[“电子邮件”]=“需要电子邮件ID”；
}
//密码
如果（！字段[“密码”]）{
formIsValid=false；
错误[“密码”]=“需要密码”；
}
this.setState（{errors:errors}）；
返回formIsValid；
}
提交（e）{
e、 预防默认值（）；
if（this.state.fields[“记住我”]）{
var Cookies=this.state.fields；
控制台日志（Cookies）；
}
if（this.handleValidation（））{
var apiBaseUrl=”http://rediy-dev.railsfactory.com/";
var输入=this.state.fields；
post（apiBaseUrl+'/api/v1/sessions/login'，输入）
.然后（功能（响应）{
控制台日志（响应）；
如果（response.data.status==200）{
console.log（“登录成功”）；
警报（“登录成功”）；
}
else if（response.data.status==422）{
console.log（“用户详细信息无效，请重新输入”）；
警报（“无效的用户详细信息。请重新输入”）；
}
})
.catch（函数（错误）{
console.log（错误）；
});
}
}
onChange（字段，e）{
让fields=this.state.fields；
字段[字段]=e.target.value；
this.setState（{fields}）；
}
render（）{
返回(
&时代；
登录
{this.state.errors[“email”]}
{this.state.errors[“password”]}
忘记密码了

新用户？注册

记得我吗
登录
取消
);
}
}

我建议您使用。当您在登录时调用API时，还要将

memory\me

布尔参数传递到后端，并使该特定用户的会话保持活动状态。作为响应，客户端将获得可用于进一步请求的身份验证令牌。以下是一个在您的案例中非常有用的示例：