使用带环回的 ReacJS 进行用户身份验证

Question

我现在正在做一个小项目，并尝试使用带有 Loopback 的 ReactJS 为前端设置用户身份验证。我有我的用户登录视图并且能够注册然后登录，但我试图将它带到哪里，如果用户没有登录那么他们就无法查看我在应用程序中的其他页面。我尝试搜索并找到了关于如何完成此步骤的非常薄的文档。我是否需要在路由器中使用 Auth，如果用户已登录，我将如何将他们重定向到某个页面。

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Carlist from './Carlist';
import About from './About';
import Contact from './contact';
import CarlistDetails from './CarlistDetails';
import Addnew from './Addnew';
import EditCar from './EditCar';
import Thanks from './Thanks';
import Login from "./Login";
import AddUsers from "./AddUsers";
const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={Login} />
      <Route exact path='/home' component={Carlist} />
      <Route exact path='/about' component={About} />
      <Route exact path='/Thanks' component={Thanks} />
      <Route exact path='/contact' component={Contact} />
      <Route exact path='/AddUsers' component={AddUsers} />
      <Route exact path='/carlist/add' component={Addnew} />
      <Route exact path='/carlist/edit/:id' component={EditCar} />
      <Route exact path='/carlist/:id' component={CarlistDetails} />
    </Switch>

  </main>


)

导出默认 Main；

import React, { Component } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';

class Login extends Component {

  submitUser(loginUser) {
    axios.request({
      method: 'post',
      url: 'http://localhost:3000/api/Users/login',
      data: loginUser
    }).then(response => {
      this.props.history.push('/home');
    }).catch(err => console.log(err));
  }

  onSubmit(e) {
    const loginUser = {
      email: this.refs.email.value,
      password: this.refs.password.value,
    }
    this.submitUser(loginUser);
    e.preventDefault();
  }






  render() {
    return (
      <div>

        <h1>Login</h1>
        <form onSubmit={this.onSubmit.bind(this)}>
          <div className="input-field">
            <input type="text" name="email" ref="email" />
            <label htmlFor="email">Email</label>
          </div>
          <div className="input-field">
            <input type="text" name="password" ref="password" />
            <label htmlFor="password">  Password</label>
          </div>
          <input type="submit" value="Login" className="btn blue darken-3" />
          <Link className="btn right" to="/AddUsers">Create Account</Link>
        </form>
      </div>
    )
  }
}
export default Login;

Answer 1

您需要一个包含登录参数的状态。

state = {login: false}

然后仅在登录为真时渲染其他路由。

<Switch>
  <Route exact path='/' component={Login} />
  {this.state.login && ...}
</Switch>

使用带环回的 ReacJS 进行用户身份验证

User Authentication Using ReacJS with Loopback

authentication

loopback

reactjs