Javascript REACTJS和API将API的值传递给另一个页面

我真的需要帮助，因为我是个新手。如何在整个页面中维护登录用户？就像一个会议。代码显示了我登录时调用的数据。我在这里真的迷路了

当凭据为true时，结果如下

{userId: 1, firstname: "Jeff", middlename: null, lastname: "Geli", positionId: 1, …}
userId: 1
firstname: "Jeff"
middlename: null
lastname: "Geli"
positionId: 1
token: "eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJMb2dnZWRVc2VyIjoie1wiVXNlcklkXCI6MSxcIkZpcnN0bmFtZVwiOlwiSmVmZlwiLFwiTWlkZGxlbmFtZVwiOm51bGwsXCJMYXN0bmFtZVwiOlwiR2VsaVwiLFwiUG9zaXRpb25JZFwiOjEsXCJUb2tlblwiOm51bGx9IiwiZXhwIjoxNTc5NzU5MzI5LCJpc3MiOiJzbWVzay5pbiIsImF1ZCI6InJlYWRlcnMifQ.xXPW0ijBdULuMBfhFGyL1qF1bA--FzG64jEJVMQZWY8"
__proto__: Object

从“React”导入React；
从“react router dom”导入{Link，withRouter}；
从“/../config/page settings.js”导入{PageSettings}；
从“../../assets/login-bg-17.jpg”导入bg；
从“axios”导入axios；
类LoginV2扩展了React.Component{
静态上下文类型=页面设置；
建造师（道具）{
超级（道具）；
//登录的凭据
此.state={
用户名：“”，
密码：“”，
};
this.handleSuccess=this.handleSuccess.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
componentDidMount（）{
this.context.handleSetPageSidebar（false）；
this.context.handleSetPageHeader（false）；
}
组件将卸载（）{
this.context.handleSetPageSidebar（true）；
this.context.handleSetPageHeader（true）；
}
手变（活动）{
这是我的国家({
[event.target.name]：event.target.value
});
};
handleSuccess（数据）{
警报（“登录”）；
this.props.history.push（'dashboard/v2'）；
}
//单击“提交”按钮时，获取API
异步handleSubmit（事件）{
event.preventDefault（）；
//获取API，方法POST
const getCred=wait fetch（“/api/login”{
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
“ApiKey”：“机密”
},
方法：“张贴”，
正文：JSON.stringify({
用户名：this.state.username，
密码：this.state.password
}),
});
const data=await getCred.json（）；
如果（getCred.status==400）{
警报（数据）；
}否则{
这个.handleSuccess（getCred）；
}
控制台日志（数据）；
}
render（）{
返回(
Tek教学
宽容管理制度
让我登录
)
}
}
使用路由器导出默认值（LoginV2）；

您可以使用

会话存储

或

本地存储

存储令牌，然后检查令牌，如果设置了令牌，则让用户保持登录状态，否则注销用户

用户登录后设置会话

 if (token) {
    localStorage.setItem('session', JSON.stringify(token));
 }

let user = localStorage.getItem('session');
if (user) {
    console.log('Valid session');
} else {
    console.log('Not valid session');
}

检查用户是否登录

 if (token) {
    localStorage.setItem('session', JSON.stringify(token));
 }

let user = localStorage.getItem('session');
if (user) {
    console.log('Valid session');
} else {
    console.log('Not valid session');
}

在日志中清除该值

let user = localStorage.getItem('session');
if (user) {
    localStorage.removeItem();
}

在提供的代码中添加逻辑

 async handleSubmit(event) {
      // .... Other code 
        const data = await getCred.json();
        if (data.status == 400) {
            alert(data);
        } else {
            this.handleSuccess(data);
        }
        console.log(data);
    }
//Set your token in handleSuccess method

 handleSuccess(data) {
        alert("Logged IN");
        if (data.token) {
            localStorage.setItem('session', JSON.stringify(data.token));
        }
        this.props.history.push('dashboard/v2');
    }

---

嗨，Sohail谢谢你的代码，它是否会像我成功登录时一样存储到另一个页面，会话是否仍然会保留？即使刷新了？如何做到这一点，我应用了代码，但无法在仪表板上获取会话。localStorage可跨应用程序使用，您可以从应用程序中的任何页面访问它。它也会在页面刷新时保持不变。您可以通过

localStorage.getItem（'session'）

打开开发人员工具，转到“应用程序”选项卡，然后单击“本地存储”，您应该会在那里看到会话条目。我现在就得到了，非常感谢！！一直在努力应对