Question

我是反应和还原的新手，我只是想同时使用两者，所以我正在创建一个应用程序，在该应用程序中我需要全局存储userData以便可以通过整个应用程序进行访问。我使用流明从后端返回userData，但是如何将其传递到整个应用程序组件（如标头和其他组件）来管理身份验证。下面我粘贴代码，谁能帮助我完成此操作。

我只工作过登录组件，而不是因为我不擅长而在redux中使用

import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import "./assets/vendor/fontawesome-free/css/all.min.css";
import "./assets/css/sb-admin-2.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min";
import validator from "simple-react-validator";
import confData from "./../Config/Config";
const apiKey = confData.apiKey;
const apiURL = confData.apiURL;
export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false,
      email: "",
      password: "",
      uData: [],
      id: ""
    };
    this.validator = new validator(this);
  }
  componentDidMount = () => {
    document.title = "Sample | Login";
  };
  loginSubmit(e) {
    e.preventDefault();
    if (this.validator.allValid()) {
      let email = this.state.email;
      let password = this.state.password;
      var self = this;
      axios
        .post(apiURL + "auth/login", {
          email: email,
          password: password
        })
        .then(function(response) {
          console.log(response.data);
          self.isLoggedIn = true;
          self.uData = response.data;
          self.setState({
            email: self.uData.email,
            id: self.uData.id,
            isLoggedIn: true
          });
          localStorage.setItem("token", JSON.stringify(self.uData));
        })
        .catch(function(error) {
          console.log(error.response);
          this.isLoggedIn = false;
        });
    } else {
      this.validator.showMessages();
      // rerender to show messages for the first time
      this.forceUpdate();
    }
  }
  handleEmailChange(event) {
    this.setState({
      email: event.target.value
    });
  }
  handlePasswordChange(event) {
    this.setState({
      password: event.target.value
    });
  }
  render() {
    return (
      <div className="row justify-content-center">
        <div className="col-xl-10 col-lg-12 col-md-9">
          <div className="card o-hidden border-0 shadow-lg my-5">
            <div className="card-body p-0">
              <div className="row">
                <div className="col-lg-6 d-none d-lg-block"></div>
                <div className="col-lg-6">
                  <div className="p-5">
                    <div className="text-center">
                      <h1 className="h4 text-gray-900 mb-4">Welcome Back!</h1>
                      <Notifications options={{ zIndex: 200, top: "50px" }} />
                    </div>
                    <form
                      className="user"
                      onSubmit={this.loginSubmit.bind(this)}
                    >
                      <div className="form-group">
                        <input
                          type="email"
                          className="form-control form-control-user"
                          id="exampleInputEmail"
                          aria-describedby="emailHelp"
                          placeholder="Enter Email Address..."
                          onChange={this.handleEmailChange.bind(this)}
                          value={this.state.email}
                        />
                        <span style={{ color: "#ff0000" }}>
                          {this.validator.message(
                            "Email",
                            this.state.email,
                            "required|email"
                          )}
                        </span>
                      </div>
                      <div className="form-group">
                        <input
                          type="password"
                          className="form-control form-control-user"
                          id="exampleInputPassword"
                          placeholder="Password"
                          onChange={this.handlePasswordChange.bind(this)}
                          value={this.state.password}
                        />
                        <span style={{ color: "#ff0000" }}>
                          {this.validator.message(
                            "Password",
                            this.state.password,
                            "required"
                          )}
                        </span>
                      </div>
                      <button className="btn btn-primary btn-user btn-block">
                        Login
                      </button>
                      <hr />
                      <Link
                        to="#"
                        className="btn btn-google btn-user btn-block"
                      >
                        <i className="fab fa-google fa-fw"></i> Login with
                        Google
                      </Link>
                      <Link
                        to="#"
                        className="btn btn-facebook btn-user btn-block"
                      >
                        <i className="fab fa-facebook-f fa-fw"></i> Login with
                        Facebook
                      </Link>
                    </form>
                    <hr />
                    <div className="text-center">
                      <Link className="small" to="#">
                        Forgot Password?
                      </Link>
                    </div>
                    <div className="text-center">
                      <Link className="small" to="#">
                        Create an Account!
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

在这里，我从lumen获取json返回数据，现在我需要使用redux和authe enter code here对所有组件的数据进行身份验证和维护，并在用户登录后对页面进行身份验证。

Answer 1

首先结帐redux文档，他们为新手https://redux.js.org/basics/example

提供了很好的例子

用户更漂亮，有2个空格键（而不是8个），https://dev.to/sarah_chima/object-destructuring-in-es6-3fm中的对象分解，您的代码非常不可读，并且永远不要将jquery与react一起使用。

将用户数据全局存储在react redux中以用于注销

1 个答案: