问题描述
我知道这背后的原因。 因为我已经修复了从 sessionStorage 到 U_Id 的路径。因此最初它没有得到 U_Id,而是在刷新存储在会话中的 U_Id 之后。
但是我找不到如何在不刷新的情况下登录后显示我的仪表板的解决方案。
export class SignIn extends Component {
organizationData = new Organization();
constructor(props) {
super(props);
this.state = {
Email: "",Password: "",redirect: false,};
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleEmailChange(event) {
this.setState({ Email: event.target.value });
}
handlePasswordChange(event) {
this.setState({ Password: event.target.value });
}
handleSubmit(event) {
event.preventDefault();
axios
.post("http://localhost:8002/Organization/auth",{
Email: this.state.Email,Password: this.state.Password,})
.then((response) => {
console.log(response);
if (response.data.status) {
this.organizationData.setUId = response.data.message.U_Id;
this.organizationData.setToken = response.data.token;
sessionStorage.setItem(
"U_Id",JSON.stringify(this.organizationData.getUId)
);
sessionStorage.setItem(
"token",JSON.stringify(this.organizationData.getToken)
);
this.props.history.push(
`/${sessionStorage.getItem("U_Id")}/dashboard`
);
}
});
}
render() {
if (this.state.redirect) {
return <Redirect to={`/${sessionStorage.getItem("U_Id")}/dashboard`} />;
}
return (
<div className="sign-in-container">
<div className="sign-in-inner">
<h3>Welcome To</h3>
<h1>PRACTICA</h1>
</div>
<div className="sign-in-input">
<h2>SIGN IN</h2>
<div className="sign-in-input-inner">
<input
className="input"
value={this.state.Email}
onChange={this.handleEmailChange}
type="email"
placeholder="University Id or Email"
/>
<input
className="input"
type="password"
value={this.state.Password}
onChange={this.handlePasswordChange}
placeholder="Password"
/>
<div
onClick={this.handleSubmit}
className="sign-in-button-container"
>
Login In
</div>
</div>
</div>
</div>
);
}
}
export default withRouter(SignIn);
路由文件
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
U_Id: sessionStorage.getItem("U_Id"),};
}
componentwillMount() {
this.setState({ U_Id: sessionStorage.getItem("U_Id") });
}
render() {
return (
<div className="app">
<Router>
<Switch>
<Route exact path="/">
<Header />
<Body />
<Footer />
</Route>
<Route exact path="/sign-in">
{sessionStorage.getItem("token") ? (
<Redirect to={`/${sessionStorage.getItem("U_Id")}/dashboard`} />
) : (
<>
<Header />
<Login />
</>
)}
</Route>
<Route exact path={`/${sessionStorage.getItem("U_Id")}/dashboard`}>
<Dashboard item="home" />
</Route>
<Route
exact
path={`/${sessionStorage.getItem("U_Id")}/dashboard/upcommings`}
>
<Dashboard item="upcomming" />
</Route>
<Route
exact
path={`/${sessionStorage.getItem("U_Id")}/dashboard/setting`}
>
<Dashboard item="setting" />
</Route>
<Route
exact
path={`/${sessionStorage.getItem("U_Id")}/dashboard/privacy`}
>
<Dashboard item="privacy" />
</Route>
<Route exact path="/sign-up/redirect">
<Header />
<SignUpRedirect />
</Route>
<Route exact path="*">
<Header />
<PageNotFound />
</Route>
</Switch>
</Router>
</div>
);
}
}
解决方法
试试这个方法-
```<Redirect
to={{
pathname: '/dashboard',state: { U_ID: this.organizationData.getUId }
}} />;
}}
在您的仪表板组件中,您可以访问 U_ID
this.props.location.state.U_ID