Reactjs 将API令牌保存到本地存储

我想知道如何将令牌保存到本地存储。我正在注册，正在生成相关令牌，我必须将其保存到本地存储器中。而且，当我在那个里打开登录页面时，我还必须获取它来检查它

我的代码：

import React, { Component } from 'react';
import { Link } from 'react-router'
class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputfirstname: '',
      inputlastname: '' ,
      inputemail: '' ,
      inputpassword: ''
    };

    this.handleFirstName = this.handleFirstName.bind(this);
    this.handleLastName = this.handleLastName.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleEmail = this.handleEmail.bind(this);
    this.handlePassword = this.handlePassword.bind(this);
  }
  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }
  handleFirstName(event) {
    this.setState({inputfirstname: event.target.value});
  }
  handleLastName(event) {
    this.setState({inputlastname: event.target.value});
  }
  handleEmail(event) {
    this.setState({inputemail: event.target.value});
  }
  handlePassword(event) {
    this.setState({inputpassword: event.target.value});
  }
  handleSubmit(event) {
    fetch("http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/accounts/" , {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        firstName: this.state.inputfirstname,
        lastName: this.state.inputlastname,
        email:this.state.inputemail,
        password: this.state.inputpassword
      })
    }).then(function(response){
      if(response.ok) {
        console.log(response)
        return response;
      }
      throw new Error('Network response was not ok.');
    }).then(function(data) { 
      console.log(data);
    }).catch(function(error) {
      console.log('There has been a problem with your fetch operation: ' + error);
    });
    alert('Submitted: ' + " " + this.state.inputfirstname +  " " + this.state.inputlastname + " " + this.state.inputemail + " " + this.state.inputpassword);
    event.preventDefault();
    this.context.router.push('/dashboard');
  }
  render() {
    return (
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-md-6">
            <div className="card mx-2">
              <div className="card-block p-2">
                <center>
                <img src="./img/logos.png"/></center>
                <p className="text-muted">Create your account</p>
                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="icon-user"></i></span>
                  <input type="text" 
                  className="form-control" 
                  placeholder="First name"
                  value={this.state.inputfirstname} onChange={this.handleFirstName}
                  />
                </div>
                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="icon-user"></i></span>
                  <input type="text" 
                  className="form-control" 
                  placeholder="Last name"
                  value={this.state.inputlastname} onChange={this.handleLastName}
                  />
                </div>
                <div className="input-group mb-1">
                  <span className="input-group-addon">@</span>
                  <input type="text" 
                  className="form-control"
                   placeholder="Email"
                   value={this.state.inputemail} onChange={this.handleEmail}
                   />
                </div>
                <div className="input-group mb-1">
                  <span className="input-group-addon"><i className="icon-lock"></i></span>
                  <input type="password" 
                  className="form-control" 
                  placeholder="Password"
                  value={this.state.inputpassword} onChange={this.handlePassword}
                  />
                </div>
                <button type="button" onClick={this.handleSubmit.bind(this)} className="btn btn-block btn-success">Create Account</button>

                <center><Link to={'/pages/login'} style={{ width: 10 + '%' }} className="nav-link" activeClassName="active"><center>Login</center></Link>
</center>
              </div>
              <div className="card-footer p-2">
                <div className="row">
                  <div className="col-6">
                    <button className="btn btn-block btn-facebook" type="button"><span>facebook</span></button>
                  </div>
                  <div className="col-6">
                    <button className="btn btn-block btn-twitter" type="button"><span>twitter</span></button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default Register;

import React，{Component}来自'React'；
从“反应路由器”导入{Link}
类寄存器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
inputfirstname:“”，
inputlastname:“”，
输入电子邮件：“”，
输入密码：“”
};
this.handleFirstName=this.handleFirstName.bind（this）；
this.handleLastName=this.handleLastName.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleEmail=this.handleEmail.bind（this）；
this.handlePassword=this.handlePassword.bind（this）；
}
静态上下文类型={
路由器：React.PropTypes.object.isRequired
}
handleFirstName（事件）{
this.setState（{inputfirstname:event.target.value}）；
}
handleLastName（事件）{
this.setState（{inputlastname:event.target.value}）；
}
handleEmail（事件）{
this.setState（{inputemail:event.target.value}）；
}
handlePassword（事件）{
this.setState（{inputpassword:event.target.value}）；
}
handleSubmit（事件）{
取回（“http://api-env.bt2qjip33m.ap-south-1.elasticbeanstalk.com/api/v1/accounts/" , {
方法：“post”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
名字：this.state.inputfirstname，
lastName:this.state.inputlastname，
电子邮件：this.state.inputemail，
密码：this.state.inputpassword
})
}).然后（功能（响应）{
if（response.ok）{
console.log（响应）
返回响应；
}
抛出新错误（'网络响应不正常'）；
}).then（函数（数据）{
控制台日志（数据）；
}).catch（函数（错误）{
console.log（'提取操作出现问题：'+错误）；
});
警报（'Submitted:'+''+this.state.inputfirstname+''+this.state.inputlastname+''+this.state.inputemail+''+this.state.inputpassword）；
event.preventDefault（）；
this.context.router.push（'/dashboard'）；
}
render（）{
返回(
创建您的帐户

@
创建帐户
登录
脸谱网
啁啾
);
}
}
导出默认寄存器；

本地存储是一个全局变量。您可以在react代码中使用它，就像

localStorage.setItem('itemName', value)
localStorage.getItem('itemName')

---

您最多使用以下代码：

要设置值，请执行以下操作：

localStorage.setItem('myData', data);

localStorage.getItem('myData');

要获取值，请执行以下操作：

localStorage.setItem('myData', data);

localStorage.getItem('myData');

---

您不应该使用localStorage，因为它不安全，可以通过JavaScript访问。

根据授权0“不要在本地存储中存储令牌”，因为“浏览器本地存储（或会话存储）不是存储敏感信息的安全位置”

他们宁愿使用cookies，请参考：

---

您可以使用普通Javascript。这应该是

.setItem

和

.getItem

js cookie呢？您可以使用

文档访问cookie。cookie

不在本地存储中存储机密-不安全cookie如何更安全？它们可以通过

文档轻松访问。cookie

跨站点脚本更安全。。。请参考我放置的链接。。。我对此做了一些研究，我发现这不太值得，但这是大多数大型安全网站喜欢的。