reactjs – 放置firebase.auth()的位置.onAuthStateChanged()
发布时间:2020-12-15 05:06:25 所属栏目:百科 来源:网络整理
导读:我正在使用react和redux实现基本的firebase身份验证. 我根据 this link上发现的react-router示例创建了受保护的路由,到目前为止一切正常. 现在,我从我的auth reducer获取用户身份验证时设置的用户的loggedIn状态,但我希望在页面刷新后使用onAuthStateChanged
我正在使用react和redux实现基本的firebase身份验证.
我根据 this link上发现的react-router示例创建了受保护的路由,到目前为止一切正常. 现在,我从我的auth reducer获取用户身份验证时设置的用户的loggedIn状态,但我希望在页面刷新后使用onAuthStateChanged()保持loggedIn状态. 我应该在哪里放置onAuthStateChanged()函数?有没有最好的做法来使用它? 我的代码供以下参考: App.js <PrivateRoute path="/dashboard" component={Dashboard} /> <Route path="/login" component={Login} /> ProtectedRoute.js const PrivateRoute = ({ component: Component,...rest }) => { const { loggedIn } = rest; return ( <Route {...rest} render={props => ( loggedIn ? (<Component {...props} />) : ( <Redirect to={{ pathname: '/login',state: { from: props.location } }} /> ) )} /> ) } function mapStateToProps({auth}){ return { loggedIn: auth.loggedIn } } export default connect(mapStateToProps)(PrivateRoute); actions_auth.js export const loginUser = ({ email,password },callback ) => { console.log(email,password) return(dispatch) => { dispatch({ type: LOGIN_USER }); auth.signInWithEmailAndPassword(email,password) .then( user => { dispatch({ type: LOGIN_USER_SUCCESS,payload: user }); callback(); },error => { console.log( error.message ); dispatch({ type: LOGIN_USER_FAIL,error: error.message }); } ) } } reducer_auth.js const INITIAL_STATE = { email: '',password: '',error: '',loading: false,loggedIn: false }; export default (state = INITIAL_STATE,action) => { switch (action.type) { case EMAIL_CHANGED: return { ...state,email: action.payload }; case PASSWORD_CHANGED: return { ...state,password: action.payload }; case LOGIN_USER: return { ...state,loading: true,error: '' }; case LOGIN_USER_SUCCESS: return { ...state,...INITIAL_STATE,user: action.payload,loggedIn: true }; case LOGIN_USER_FAIL: return { ...state,error: action.error }; case LOGOUT_USER: return { ...state,...INITIAL_STATE }; default: return state; } };
您应该在创建redux store的位置找到它,应该是您呈现App组件的位置.
您可以查看 here以获取更多详细信息. 如果你经常使用firebase,我建议花一些时间来设置这个很棒的库 react-redux-firebase (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |