我正在开发一个与 Firebase 集成的 React Web 应用程序,并且我正在尝试对我的用户进行身份验证。我已经设置了路线,以便在用户通过身份验证时显示主页组件,否则显示登录页面。但是,当我的应用程序首次加载时,它会显示登录页面,需要一两秒的时间才能识别用户实际上已通过身份验证,然后切换到主页。它看起来很混乱,我猜我没有很好地或足够快地处理 onAuthStateChanged 。在我的 App 组件中,我订阅了一个 ReactObserver,它会在身份验证状态发生更改时发出信号。我该怎么做才能避免这种奇怪的行为?
My App.js
:
import {BrowserRouter, Route} from "react-router-dom";
import Home from "./Home";
import Login from "./Login";
import {loggedIn, firebaseObserver} from "../firebase";
import {useEffect, useState} from "react";
export default function App() {
const [authenticated, setAuthenticated] = useState(loggedIn())
useEffect(() => {
firebaseObserver.subscribe('authStateChanged', data => {
setAuthenticated(data);
});
return () => { firebaseObserver.unsubscribe('authStateChanged'); }
}, []);
return <BrowserRouter>
<Route exact path="/" render={() => (authenticated ? <Home/> : <Login/>)} />
</BrowserRouter>;
}
My firebase.js
:
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import ReactObserver from 'react-event-observer';
const firebaseConfig = {
apiKey: ...,
authDomain: ...,
projectId: ...,
storageBucket: ...,
messagingSenderId: ...,
appId: ...
};
firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const firebaseObserver = ReactObserver();
auth.onAuthStateChanged(function(user) {
firebaseObserver.publish("authStateChanged", loggedIn())
});
export function loggedIn() {
return !!auth.currentUser;
}
对于可能关心的人来说,在身份验证实际加载时添加一个简单的标志解决了我的问题。我还添加了受保护的路线(灵感来自本文 https://dev.to/pprathameshmore/protected-routes-in-react-js-216i我想我现在可以很好地继续我的项目了。
App.js
:
import {BrowserRouter, Redirect, Route, Switch} from "react-router-dom";
import Home from "./Home";
import Login from "./Login";
import {PrivateRoute} from "./PrivateRoute";
import {loggedIn, firebaseObserver} from "../firebase";
import {useEffect, useState} from "react";
export default function App() {
const [authenticated, setAuthenticated] = useState(loggedIn());
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
firebaseObserver.subscribe('authStateChanged', data => {
setAuthenticated(data);
setIsLoading(false);
});
return () => { firebaseObserver.unsubscribe('authStateChanged'); }
}, []);
return isLoading ? <div/> :
<BrowserRouter>
<Switch>
<Route path="/" exact>
<Redirect to={authenticated ? "/home" : "/login"} />
</Route>
<PrivateRoute path="/home" exact
component={Home}
hasAccess={authenticated} />
<PrivateRoute path="/login" exact
component={Login}
hasAccess={!authenticated} />
<Route path="*">
<Redirect to={authenticated ? "/home" : "/login"} />
</Route>
</Switch>
</BrowserRouter>;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)