我正在使用 Firebase
对我的应用程序的用户进行身份验证。我已创建 SignIn
和 SignUp
表单,并且可以成功创建新用户并使用存储的用户登录。但是,问题在于在重新加载
后保持用户登录状态。
我在教程中看到的方法是使用如下所示的 HOC 来检查当前用户是否已登录。
const withAuthentication = Component => {
class WithAuthentication extends React.Component {
constructor(props) {
super(props);
this.state = {
authUser: null,
};
}
componentDidMount() {
this.listener = this.props.firebase.auth.onAuthStateChanged(
authUser => {
authUser
? this.setState({ authUser })
: this.setState({ authUser: null });
},
);
}
componentWillUnmount() {
this.listener();
}
render() {
return (
<AuthUserContext.Provider value={this.state.authUser}>
<Component {...this.props} />
</AuthUserContext.Provider>
);
}
}
return withFirebase(WithAuthentication);
};
export default withAuthentication;
但是,我希望使用新的 React
Hooks
来消除对 HOC
的需求。我已经通过使用 React Context
和 useContext(FirebaseContext)
访问 a 来删除了 withFirebase()
HOC
Firebase
的单个实例。有没有办法使用新的hooks
来模仿我创建的组件
中的withAuthentication
HOC
?
我正在使用本教程
https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/
标题为“使用高阶组件进行 session 处理”的部分包含此部分。
谢谢!
最佳答案
您可以编写一个自定义 Hook
来注册效果并返回身份验证状态
const useFirebaseAuthentication = (firebase) => {
const [authUser, setAuthUser] = useState(null);
useEffect(() =>{
const unlisten = firebase.auth.onAuthStateChanged(
authUser => {
authUser
? setAuthUser(authUser)
: setAuthUser(null);
},
);
return () => {
unlisten();
}
}, []);
return authUser
}
export default useFirebaseAuthentication;
并且在任何组件
中,您都可以像这样使用它
const MyComponent = (props) => {
const firebase = useContext(FirebaseContext);
const authUser = useFirebaseAuthentication(firebase);
return (...)
}
Index.jsx
将包含此代码
ReactDOM.render(
<FirebaseProvider>
<App />
</FirebaseProvider>,
document.getElementById('root'));
此 Firebase 提供程序的定义如下,
import Firebase from './firebase';
const FirebaseContext = createContext();
export const FirebaseProvider = (props) => (
<FirebaseContext.Provider value={new Firebase()}>
{props.children}
</FirebaseContext.Provider>
);
关于reactjs - 如何将 Firebase onAuthStateChange 与新的 React Hooks 结合使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55366320/