0

当用户通过 LoginForm.js 成功登录时

登录表单.js

  ----constructor, etc.----
  }resetForm() {
    this.setState({
      //bla bla
    });
  }doLogin() {
    if (!this.state.email) {
      console.log("'Email' darf nicht leer sein");
      return;
    }
    if (!this.state.password) {
      console.log("'Passwort' darf nicht leer sein");
      return;
    }
    this.setState({
      buttonDisabled: true,
    });axios.post(
        "http://localhost:8080/api/login",
        {
          userEmail: this.state.email,
          userPassword: this.state.password,
        },
        {
          withCredentials: true, //ein Cookie wird gesetzt
        }
      ).then((response) => {
        if (response.data != -1) {
          console.log("login erfolgreich", response);
          UserStore.isLoggedIn = true;
          UserStore.id = response.data; //current user id wird zugewiesen
          UserStore.email = this.state.email;
          console.log("current_user_id: " + UserStore.id);
          this.resetForm();
          this.showCalendar();
        } else {
          console.log("login fehlgeschlagen", response);
          this.resetForm();
        }
      })
      .catch((error) => {
        console.log("API-Call fehlgeschlagen", error);
        this.resetForm();
      });
  }render() {
    return (
      <div className="loginForm">
        <Header name="Login" />
        <InputField
          type="email"
          placeholder="Email"
          value={this.state.email ? this.state.email : ""}
          onChange={(value) => this.setInputValue("email", value)}
        />
        <InputField
          type="password"
          placeholder="Password"
          value={this.state.password ? this.state.password : ""}
          onChange={(value) => this.setInputValue("password", value)}
        />
        <SubmitButton
          text="Login"
          disabled={this.state.buttonDisabled}
          onClick={() => this.doLogin()}
        />
      </div>
    );
  }
} ```

I want to render the page to <Calendar /> (Component Class Calendar.js). So that the user gets the main page of the application. 

I dont know, how i can get back to App.js to render the page, after getting the response "true" from the backend (--> Login Succesful).

I tried it with
``` showCalendar() {
    React.render(<Calendar/>);
  } ```

but it doesnt work.

UserStore.js
```class UserStore {
  constructor() {
    extendObservable(this, {
      isLoggedIn: false,
      email: "",
      userName: "",
      id: 0,
    });
  }
}```

export default new UserStore();
App.js
``` class App extends React.Component {
  componentDidMount() {
    
  }

  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/calendar">Calendar</Link>
              </li>
              <li>
                <Link to="/userlist">Userlist</Link>
              </li>
            </ul>
          </nav>

          {/* A <Switch> looks through its children <Route>s and
                renders the first one that matches the current URL. */}
          <Switch>
            <Route path="/calendar">
              <Calendar />
            </Route>
            <Route path="/userlist">
              <UserList />
            </Route>
            <Route path="/">
              <Home />
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

ReactDOM.render(<App />, document.querySelector("#app"));

在我对互联网的研究中，我没有找到解决方案。在我看来，必须有一种方法可以将事件监听器添加到 Userstore.id。因此，如果 UserStore.id 发生变化（在用户登录时发生），我们可以将页面重新排列为 .

4

2 回答 2

0

这就是您需要做的所有事情：请将 LoginForm.js 文件分离到一个单独的文件中。

导入 withRouter

import { withRouter } from 'react-router'

然后将您的 showCalendar 更改为：

showCalendar() {
    const { history: { push } } = this.props;
    push('/calendar');
}

并且不要忘记将组件包装在 withRouter 中：

export default withRouter(LoginForm);
于 2021-05-04T14:56:49.243 回答
0
  1. 由于您使用的是 react-router-dom，因此您可以在成功登录后使用历史记录将您的用户重定向到“/日历”路由。

this.props.history.push('/calendar')

  1. 您可以通过您使用的任何状态管理工具或机制检查“UserStore.isLoggedIn”在日历路由上是否仍然为真。如果不是真的，那么您需要将用户发送回登录页面。
于 2021-05-04T15:10:24.457 回答