![身份验证检查反应路由器保护的路由]( "身份验证检查反应路由器保护的路由")
本文介绍了使用 Firebase 身份验证检查反应路由器保护的路由的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想实施受保护的路由，并使用 firebase 进行身份验证.我的浏览器被这段代码冻结了:
const 应用程序:React.FC = () =>{const [身份验证，setAuthState] = useState({认证:假，初始化:真});firebase.auth().onAuthStateChanged(user => {如果(用户){设置验证状态({已验证:真实，初始化:假});} 别的 {设置验证状态({认证:假，初始化:假});}});如果(身份验证.初始化){返回<div>加载</div>;}返回 (<路由器><div><开关><路由精确路径="/login" component={Login}/><私人路线路径=/"组件={首页}已认证={authentication.authenticated}/><私人路线路径=/加入"组件={加入}已认证={authentication.authenticated}/><私人路线路径=/创建"组件={创建}认证={authentication.authenticated}/></开关>
</路由器>);};
我是 React 新手，这是我第一次使用 React 钩子，但这里有什么问题?
解决方案
我认为就像 iHowell 在评论中解释的那样，firebase auth ... 是一个副作用，所以你必须使用 useEffect hook.
const 应用程序:React.FC = () =>{const [身份验证，setAuthState] = useState({认证:假，初始化:真});React.useEffect(() => firebase.auth().onAuthStateChanged(user => {如果(用户){设置验证状态({已验证:真实，初始化:假});} 别的 {设置验证状态({认证:假，初始化:假});}}), [setAuthState]);如果(身份验证.初始化){返回<div>加载</div>;}返回 (<路由器><div><开关><路由精确路径=/login";组件={登录}/><私人路线路径=/"组件={首页}已认证={authentication.authenticated}/><私人路线路径=/加入"组件={加入}已认证={authentication.authenticated}/><私人路线路径=/创建"组件={创建}已认证={authentication.authenticated}/></开关>
</路由器>);};
I want to implement protected routes and I use firebase for authentication. My browser freezes with this piece of code:
const App: React.FC = () => {
const [authentication, setAuthState] = useState({
authenticated: false,
initializing: true
});
firebase.auth().onAuthStateChanged(user => {
if (user) {
setAuthState({
authenticated: true,
initializing: false
});
} else {
setAuthState({
authenticated: false,
initializing: false
});
}
});
if (authentication.initializing) {
return <div>Loading</div>;
}
return (
<Router>
<div>
<Switch>
<Route exact path="/login" component={Login} />
<PrivateRoute
path="/"
component={Home}
authenticated={authentication.authenticated}
/>
<PrivateRoute
path="/join"
component={Join}
authenticated={authentication.authenticated}
/>
<PrivateRoute
path="/create"
component={Create}
authenticated={authentication.authenticated}
/>
</Switch>
</div>
</Router>
);
};
I'm a React newbie and this is my first time with React hooks but what's wrong here ?
解决方案
I think that like iHowell explain in the comment, the firebase auth ... is a side effect, so you have to use the useEffect hook.
const App: React.FC = () => {
const [authentication, setAuthState] = useState({
authenticated: false,
initializing: true
});
React.useEffect(() => firebase.auth().onAuthStateChanged(user => {
if (user) {
setAuthState({
authenticated: true,
initializing: false
});
} else {
setAuthState({
authenticated: false,
initializing: false
});
}
}), [setAuthState]);
if (authentication.initializing) {
return <div>Loading</div>;
}
return (
<Router>
<div>
<Switch>
<Route exact path="/login" component={Login} />
<PrivateRoute
path="/"
component={Home}
authenticated={authentication.authenticated}
/>
<PrivateRoute
path="/join"
component={Join}
authenticated={authentication.authenticated}
/>
<PrivateRoute
path="/create"
component={Create}
authenticated={authentication.authenticated}
/>
</Switch>
</div>
</Router>
);
};
这篇关于使用 Firebase 身份验证检查反应路由器保护的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！