我正在使用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>
提前谢谢!