我已将firebase身份验证与react-redux一起使用。我已经在action.js中创建了一个函数并将其导入组件中。并点击按钮。现在,它可以完美地用于登录,但是当我刷新页面时,用户将自动注销。刷新后如何保持用户登录状态?
这是我在action.js中的登录功能:
const facebook_login = (history) => {
return (dispatch) => {
var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider)
.then(function (result ) {
var token = result.credential.accessToken;
var user = result.user;
let create_user = {
name: user.displayName,
email: user.email,
profile: user.photoURL,
uid: user.uid
}
firebase.database().ref('/').child(`users/${user.uid}`).set(create_user)
.then(()=>{
dispatch({type: "SETUSER",payload: create_user})
alert("USER LOGGED IN SUCCESSFULLY")
history.push('/chat')
})
console.log("user ====> ", create_user)
}).catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage)
})
}
}
这是组件文件:
class Chat extends Component {
componentDidMount(){
this.props.get_users()
}
render(){
console.log("userssssssss", this.props.users)
let user = this.props.current_user;
return(
<div>
<h1>Welcome {user.name}</h1>
<img src={user.profile} alt=""/>
<h2>{user.email}</h2>
<div>
<h1>USERS:</h1>
<ul>
{this.props.users.map((v,i)=>{
return v.uid !== user.uid && <li key={i}>{v.name} <button>chat</button> </li>
})}
</ul>
</div>
</div>
)
}
}
const mapStateToProps = (state) => ({
current_user: state.current_user,
users: state.users
})
const mapDispatchToProps = (dispatch) => ({
get_users: () => dispatch(get_users())
})
export default connect(mapStateToProps, mapDispatchToProps)(Chat);