[英]In React, Firebase auth user is null every time I refresh the page
我被下面的問題困住了。 我經歷了幾個與同一問題相關的問題和答案,但沒有一個對我有用。
我正在使用 firebase.auth().onAuthStateChanged 來檢查用戶是否已經登錄,但每當我刷新頁面時,我總是讓用戶為空。
PFB代碼
import React, { Component } from 'react';
import Header from './Header';
import Home from './Home/components/Home';
import Footer from './Footer/components/Footer';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Route, Redirect, withRouter, Switch } from 'react-router-dom';
import { auth } from '../firebase/auth';
import Dashboard from './Dashboard/components/Dashboard';
import * as actions from '../actions/index';
import {Map, List, fromJS} from 'immutable';
class App extends Component {
constructor(props){
super(props);
this.state = {
loading: true,
authenticated: false,
user: null
}
}
componentDidMount() {
auth.onAuthStateChanged(user => {
//user is null every time I refresh the page
if (user) {
this.props.userLoading(false);
this.props.authUser(true);
this.props.storeUser(user.providerData);
this.props.history.push('/dasboard');
} else {
this.props.userLoading(false);
this.props.authUser(false);
this.props.history.push('/');
}
});
}
componentWillUnMount(){
this.unSubscribe();
}
render(){
const { authenticated, loading } = this.state;
return(
<div>
<Header />
<Router>
<div>
<Route path='/' exact component={Home}/>
<Route path='/dashboard' component={Dashboard} />
</div>
</Router>
<Footer />
</div>
)
}
}
const mapStateToProps = state => {
const user = state.getIn(['user', 'data'], List());
const authenticate = state.getIn(['user', 'auth'], false);
const userLoading = state.getIn(['user', 'loading'], false);
return {
user,
authenticate,
userLoading
};
}
const actionsToProps = {
storeUser: actions.storeUser,
authUser: actions.authUser,
userLoading: actions.userLoading
}
export default withRouter(connect(mapStateToProps, actionsToProps)(App))
auth.js:
import firebase from './firebase';
export const auth = firebase.auth();
export const logout = firebase.auth().signOut();
export const githubProvider = firebase.firebase_.auth.GithubAuthProvider();
export const twitterProvider = new firebase.firebase_.auth.TwitterAuthProvider();
export const facebookProvider = new firebase.firebase_.auth.FacebookAuthProvider();
我正在使用 Firebase 版本 5.8.3。
我嘗試了很多可能性,比如使用 async await、setTimeout,但它們都不起作用。
您似乎要退出 auth.js:
firebase.auth().signOut();
Firebase 將注銷操作排入隊列,並在 Auth 實例准備就緒時運行它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.