FIrebase身份验证刷新注销

时间:2020-11-06 05:45:37

标签: reactjs react-redux firebase-authentication facebook-authentication

我已将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);

0 个答案:

没有答案