Question

我在rails中有一个基本的devise auth，并试图将它与react.js一起使用。我创建了一些将用户信息呈现到json的控制器。如果用户不存在，则在应用程序中“检查”返回current_user或“错误：'无效的登录尝试'”。因此，存在一些或更多问题：

构造函数中的“ if else”不起作用image，如果currentUser存在但页面仍在注册

2。注册工作：将新用户添加到数据库中。但是，当我输入数据并尝试登录时，按钮注销将呈现为我登录的状态，但是在更新注册表单再次出现之后

3。总的来说，我是想做对吗？还是本质上是错误的？

App.js

class App extends React.Component {
  constructor(){
      super();
      this.state = {
        currentUser: null
      }
      this.updateCurrentUser = this.updateCurrentUser.bind(this);    
    }
    componentDidMount(){   
      let that = this
      axios.get('/check',{
      })
      .then(function(response){
        if(response.data.email){
          console.log(response.data.email)
          that.setState({
            currentUser: response.data.email
          })
        } else {
          that.setState({
            currentUser: null
          })
        }
      })
      .catch(function(error){
        console.log(error);
      })
    }
    updateCurrentUser(email) {
      this.setState({
        currentUser: email
      })
    }    
  render(){ 
      return (      
        <Header currentUser = {this.state.currentUser} updateCurrentUser={this.updateCurrentUser}/>             
      )
    }
  }

Header.js

class Header extends React.Component {
constructor(props){
    super(props);
    if (this.props.currentUser == null){
      this.state = {
        page:"signup"
      }
    } else{
      this.state = {
        page: "delete"
      }
    }
  
    this.changePage = this.changePage.bind(this);
  }
 
changePage(newPage) {
    this.setState({
      page: newPage
    })
  }
render() {
    switch(this.state.page) {
      case "signup":
         
        return <Signup changePage={this.changePage} updateCurrentUser={this.props.updateCurrentUser} currentUser = {this.props.currentUser}/>
      case "login":
        return <Login changePage={this.changePage} updateCurrentUser={this.props.updateCurrentUser} currentUser = {this.props.currentUser}/>
      case "delete":
        return <Logout changePage={this.changePage} updateCurrentUser={this.props.updateCurrentUser} currentUser = {this.props.currentUser} />
    }        
    }
  }

Signup.js

 class Signup extends React.Component {
    constructor(props){
      super(props);
      this.handleSignup = this.handleSignup.bind(this);
    }
  handleSignup(e) {
      e.preventDefault();
      let that = this
      axios.post('http://localhost:3000/users', {
        user: {
          email: document.getElementById("email").value,
          password: document.getElementById("password").value,
          password_confirmation: document.getElementById("password_confirmation").value
        }
      })
      .then(function(response){
        that.props.changePage("delete");
        
        that.props.updateCurrentUser(response.data.email);
      })
      .catch(function(error){
        console.log(error)
      })
  }
  render() {
    return (
        <div>
          <h2>Signup</h2>
          <h2>User:{this.props.currentUser}</h2>

          <form>
            <input id="email" placeholder="email"/>
            <input id="password" placeholder="password"/>
            <input id="password_confirmation" placeholder="retype password"/>
            <button onClick={this.handleSignup}>Submit</button>
          </form>
          <button onClick={() => this.props.changePage("login")}>Back to Login</button>
        </div>
      );
    };
  };

登录页面相同，但是带有axios.post（'http：// localhost：3000 / users / sign_in'），并且没有密码确认。

使用devise gem进行React-Rails身份验证

0 个答案: