在功能结束时如何响应重定向?

时间:2018-09-19 15:19:23

标签: reactjs react-router router

我正在使用Firebase电子邮件登录身份验证,一旦成功登录,我想显示带有用户欢迎消息的用户主页。  在登录功能结束时,如果登录成功,我想使用react路由器重定向到主页。重定向应该是自动的。

import React, {Component} from 'react';
import './Auth.css';
import {Router,Route} from 'react-router';

// import{Router} from 'react-router';
// import {Link } from 'react-dom';

var firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');
var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  };
  firebase.initializeApp(config);

class Auth extends Component{
  constructor(props){
    super(props);
    this.state={
      err: ''
    };
    this.login=this.login.bind(this);
    this.signup=this.signup.bind(this);
    this.teset=this.teset.bind(this);
  }

  login(event){
    const uname = this.refs.email.value;
    const pwd = this.refs.password.value;
    const auth = firebase.auth();
    const promise = auth.signInWithEmailAndPassword(uname , pwd);

    promise.catch(e => {
      var err = e.message;
      console.log(err);
      this.setState({err : err});
    });
  }

  signup(event){
    const uname = this.refs.email.value;
    const pwd = this.refs.password.value;
    const auth = firebase.auth();
    var promise = auth.createUserWithEmailAndPassword(uname, pwd);
    console.log(uname,pwd);
    promise
    .then(user => {
      var msg = "Welcome "+ user.user.email;
        firebase.database().ref('users/'+user.user.uid).set({
        email : user.user.email
      });

      this.setState({ err: msg})
    });
    promise.catch(e => {
      var err = e.message;
      console.log(err);
      this.setState({err : err})

     });
  }

  teset(){
    this.props.history.push('/home');
    console.log("test valled");
  }

  render(){
    return(

<div id="form">
    <div className="logo">
        <h1 className="text-center head">The form</h1>
    </div>
		<div className="form-item">
			   <input type="email" placeholder="Email" ref="email" id="email" className="form-style" />
		</div>
		<div className="form-item">
			  <input type="password" placeholder="password" ref="password" id="password" className="form-style" />
			<p><a href="" ><small>{this.state.err}</small></a></p>
      <a href="/Home.js">home</a>
		</div>
		<div className="form-item">
    		<input type="button" onClick={this.login}className="login " value="Log In"/>
    		<input type="button" className="login" onClick={this.signup} value="Sign Up"/>
    		<input type="button" className="login "  onClick={this.teset} value="Log out"/>
    		<div className="clear-fix"></div>
		</div>
</div>


    );
  }
}

export default Auth;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

提前谢谢!

0 个答案:

没有答案