我正在通过Firebase使用Facebook登录构建一个反应原生应用程序，并将凭据存储在我的redux状态中。 在我的登录页面上，我有一个按钮，可以触发检查以查看此人是否已登录。 如果是，它会直接进入"仪表板"(通过反应导航(，如果该人没有登录，它会打开Facebook流。
我遇到的问题是，在经历了Facebook流程之后，什么也没发生。 但是，当我再次单击"登录"按钮时，它确实成功加载了该人并执行重定向。 知道这里会发生什么吗？ 我有一种感觉，我没有正确使用我的异步/等待，但似乎无法弄清楚。 以下是我相关部分的代码。
/screens/Login的一部分.js
logUserIn = async (loadUser, setLoggedInUser) => {
await loadCurrentUser(loadUser);
console.log(this.props.user.name);
if (Boolean(this.props.user.name)) {
await setLoggedInUser(true);
} else {
loginWithFacebook()
.then(loadCurrentUser(loadUser));
}
};
render() {
const { navigate } = this.props.navigation;
const {
loadUser,
user,
isLoggedIn,
setLoggedInUser,
} = this.props;
return (
<View style={ styles.container }>
<Button
title='Login'
onPress={ () => this.logUserIn(loadUser, setLoggedInUser) }
/>
</View>
);
}
}
services/facebookAPI.js
export const loadCurrentUser = async (loadUser) => {
const user = await userLoginStatus();
console.log('pre-if: ' + Boolean(await user));
if (Boolean(user)) {
console.log('post-if: ' + Boolean(user));
console.log(user.displayName + ' is logged in!');
loadUser(user);
} else {
console.log('user not logged in');
return null;
}
};
/操作.js
export const setLoggedInUser = (isLoggedIn) => (dispatch) => {
dispatch({
type: 'LOGGED_IN',
isLoggedIn: isLoggedIn,
});
dispatch(NavigationActions.navigate({ routeName: 'Dashboard' }));
};
你可以尝试走侦听器路线。基本上，在根组件中，您有三种状态。正在加载、注销或登录。加载是初始状态，然后检查onAuthStateChanged的结果是否包括用户。如果是这样，则表示您已登录，可以加载已登录的视图。如果没有，您可以加载已注销的视图(在您的情况下是Facebook登录(。
componentWillMount () {
this.unsubscriber = firebase.auth().onAuthStateChanged((user) => {
if (user) {
// Do your login!
} else {
// Do your logged out stuff!
}
)}
// Don't forget to unsubscribe:
componentWillUnmount () {
if (this.unsubscriber) {
this.unsubscriber()
}
}
这很好的原因是因为一旦身份验证状态发生变化，Firebase 就会在这里调用您的回调。因此，一旦他们使用Facebook登录，这将触发，您将知道您已准备好开始处理登录内容。
您滥用了 async/await，它只应用于异步代码。此外，将 async/await 与 Promise.then(( 混合是完全可能的，但最好避免使用，并且绝对使用相同的方法，我不推荐它。
此外，在你的成功道路上，你再次提到props.loadUser，当然，自从你第一次调用它以来，它没有改变。第二次按下按钮props.user确实改变了，这就是为什么你最终会走上快乐的道路。
logUserIn = async (loadUser, setLoggedInUser) => {
await loadCurrentUser(loadUser);
if (Boolean(this.props.user.name)) {
setLoggedInUser(true); // await not needed, dispatching is synchronous
} else {
await loginWithFacebook(); // refactored to await for consistency reasons
setLoggedInUser(true); // you are logged in at this point
}
};
您可能还需要在setLogginInUser((上方添加loadUser((方法，但是由于您没有添加该函数，因此我不知道它的用途。