Question

我的reactjs应用程序中具有firebase身份验证，如果用户已登录（通过正确的电子邮件和密码），我想重定向到/ home，然后向我显示另一个组件。登录后我设法推送到/ home。但是，如果我在没有（正确）用户登录数据的情况下将/ home添加到url，也可以使用。只有在用户数据正确的情况下，有人可以帮助我进行路由吗？这是我第一次使用React Router。

所以我的Login.js

import React from "react";
import {auth} from "../firebase";
import { BrowserRouter as Router, Redirect} from "react-router-dom";

class Login extends React.Component {
  constructor() {
    super();

    this.state = {
      email: "",
      password: "",
      isAuthenticated: false,
    };

    this.onChangeHandler = this.onChangeHandler.bind(this);
    this.onSubmitHandler = this.onSubmitHandler.bind(this);
}

  onChangeHandler(e) {
    if (e.target.name === "email") {
      this.setState({ email: e.target.value });
    }

    if (e.target.name === "password") {
      this.setState({ password: e.target.value });
    }
  }

  onSubmitHandler() {
    let email = this.state.email;
    let password = this.state.password;

    auth.signInWithEmailAndPassword(email, password);


      auth.onAuthStateChanged((user) => {
        if (user) {
          this.setState({isAuthenticated: true});
          console.log("USER " + user.email);
        } 
      });
  }


  render() {
    return (
      <div name="login-form">
        <header>
          <h1>Headline</h1>
          <h2>Login</h2>
        </header>
          <input
            placeholder="email"
            type="email"
            name="email"
            onChange={this.onChangeHandler}
            value={this.state.email}
          ></input>
          <input
            placeholder="password"
            type="password"
            name="password"
            onChange={this.onChangeHandler}
            value={this.state.password}
            required={true}
          ></input>
          
          <div>
            {this.state.isAuthenticated ? <Router> <Redirect to='/home'/></Router> : null}
            <button onClick={() => {this.onSubmitHandler()}}>Login</button>
          </div>
      </div>
    );
  }
}

export default Login;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import Login from './components/Login';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';


ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Switch>
        <Route exact path="/">
          <Login/>
        </Route>
        <Route exact path="/home">
          <h1>Test</h1>
        </Route>
      </Switch>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

还有一个firebase.js，其中包含初始化和export const auth = firebase.auth();

我已经阅读了一些有关私有路由的信息，但是由于我还是ReactJS的初学者，所以我不确定如何使用它。

通过Firebase进行身份验证后的ReactJS路由

0 个答案: