javascript - 防止用户在刷新并停留在同一页面时被重定向到主页 React JS
问题描述
这是我的代码,我通过道具将身份验证状态和令牌传递给其他组件:问题是当我刷新页面时,它会将我重定向到主页。
这是我的代码:
class App extends React.Component{
constructor(props){
super(props);
this.state = {
account: {
email: "",
password: ""
},
token: "",
auth: false
};
}
confirm = async (email) => {
let result;
let stateAccount;
let authToken;
let myCookie;
let storedCookie;
try {
result = await axios.post(`http://localhost:5000/abc/dosomething`, {email},{withCredentials: true});
stateAccount = this.state.account
stateAccount.email = email;
this.setState({stateAccount});
console.log(result);
if (this.state.account.email === result.data.Email && this.state.account.password === result.data.OTPCode) {
authToken = result.headers.accesstoken;
this.setState({token: authToken});
myCookie = this.addCookies();
myCookie = myCookie.split('=');
storedCookie = myCookie[1].trim();
} else {
console.log(`Invalid Login!`);
}
let history = this.props.history;
if(this.state.token === storedCookie){
console.log("Successful Login!");
console.log(`found cookie: ${storedCookie}`);
this.setState({auth: true});
history.push({pathname: "/some-endpoint/abc", state: {stateAccount}});
}else{
this.setState({errorMessage: "Invalid Login!"});
}
}catch(error){ //set this to Permission Denied in production
console.log(`${error.data}`});
}
}
notLoggedInhomePage = () =>{
if(!this.state.auth) {
return (
<form onSubmit={this.handleSubmit}>
<label>Email Address</Form.Label>
<input type="text" value={this.state.account.email} onChange={this.handleChange} name="email"/>
<label>Password</Form.Label>
<input type="password" value={this.state.account.password} onChange={this.handleChange} placeholder="Enter One Time Password" name="password"/>
<button type="submit" onClick={() => this.someFunction(String(this.state.account.email))}>Do Something</button>
<button type="submit" onClick={() => this.someOtherFunction()}>Do something else</button>
</form>
);
}else{
return(<Redirect to="/logged-in-page/signed-in" />);
}
}
render(){
return(
<Router>
{this.notLoggedInhomePage()}
<Switch>
<Route path="/list" exact component={AComponent} auth={this.state.auth} account={this.state.account} token={this.state.token} />
</Switch>
</Router>
);
}
我知道状态是一个临时内存,但我想做的是,当我刷新页面时,我希望用户停留在刷新之前他们所在的页面上。然而,发生的情况是它们被重定向回主页(即登录屏幕),因为 this.state.auth 将等于 false,如上面在 notLoggedInhomePage 中所见。
解决上述问题的最佳解决方案是什么?
解决方案
我通过从 notLoggedInhomePage = () => 方法中删除 else 块解决了上述问题。
我删除了:
else{
return(<Redirect to="/logged-in-page/signed-in" />);
}
推荐阅读
- java - 在 Maven 项目中使用本地存储的 .jar 文件作为依赖项:编译类文件
- python - Python 根据阈值使用 PhotoScan 过滤点云 - 需要基本的 Python 帮助
- abap - 如何用一条 ABAP SQL 语句连接以下 3 个表
- java - 在 JPA 实体中添加 auto_increment
- php - 检查php中的对象属性是否未定义的最佳方法是什么?
- botframework - 使用 azure cli 更新 azure web app bot 应用程序设置时出错
- python - 如何获取具有两个类名的表中元素的数量?
- javascript - 根据条件动态地将脚本添加到我的应用程序
- c++ - svg 图标在高 DPI 上出现像素化
- javascript - 画布图像与画布或原始图像大小不同