我正在使用Firebase
来验证我的应用程序的用户。我创建了SignIn
和SignUp
表单,可以成功创建新用户并使用存储用户登录。但问题是在Reload
之后维护用户登录状态。
我在教程中看到它的方式是使用像下面这样的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
来消除对HOCs
的需求。我已经使用withFirebase()
和HOC
删除了React Context
useContext(FirebaseContext)
来访问Firebase
的单个实例。有没有办法使用新的hooks
来模仿我创造的withAuthentication
中的HOC
components
?
我正在使用本教程
https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/
标题为“使用高阶组件的会话处理”部分包含此部分。
谢谢!
您可以编写一个注册效果的Custom Hook
并返回auth状态
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;
在任何Component
你都可以使用它
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>
);