我正在使用firebase身份验证保护一个页面。如果用户登录，那么我将显示该页面，否则我将返回用户登录页面。
还有许多其他的网页，我想保护未经授权的用户。
我想问，我保护页面的方式是好的吗？我应该继续使用相同的代码，还是有其他称为最佳实践的方法。
验证码如下：
import { useState } from "react";
import {auth} from '../dashboard/config';
import {onAuthStateChanged } from "firebase/auth";
import {useNavigate } from 'react-router-dom';
const [isProtectPage, setIsProtectPage] = useState(false);
const navigate = useNavigate();
onAuthStateChanged(auth, (user) => {
if (user) {
//if user is logged in show component.
setIsProtectPage(true);
}
else {
//if user is not logged in hide component.
setIsProtectPage(false);
//And redirect user to login page.
setTimeout(() => {
navigate("/login")
}, 3000);
}
});字符串
JSX：
{isProtectPage ? ( <DashboardPage /> )
:
( <h2> You are not authorized to access this page. </h2> )
}型
谢谢
2条答案
按热度按时间v1l68za41#
您所显示的内容被称为路由：将访问者发送到当前状态的正确页面。它不提供保护，因为您现在拥有的代码不会阻止用户通过在浏览器中键入其URL来访问任何页面。
如果你想要这种保护，你需要在服务器上运行一些代码，这些代码也会检测访问者的状态，并基于此允许/阻止对页面的访问。
但许多客户端Web应用程序不需要这样做，因为HTML、CSS JavaScript本身并不保密，可以安全地与用户共享。相反，这些应用程序会保护这些页面中显示的数据，因为这些数据会动态加载（例如从Firebase的Firestore或Realtime数据库），然后通过服务器端机制（例如Firebase security rules）控制对该数据的访问。
nhhxz33t2#
如果我理解正确，我认为您提供的代码是使用Firebase身份验证保护页面的有效方法。正如您所知，它检查用户是否使用onAuthStateChanged登录并相应地设置状态。如果用户登录，受保护的组件（DashboardPage），否则，显示指示用户未被授权的消息。代码会在3秒的延迟后将用户重定向到登录页面。这种方法可以被认为是使用Firebase身份验证保护页面的良好做法。但是，您可以考虑其他一些最佳做法：
将身份验证逻辑移到单独的实用程序或服务文件中，以更好地组织代码。
实施客户端路由保护，以防止未经授权访问受保护的路由。
考虑使用Firebase的内置路由保护机制，如Firestore安全规则或云函数，以实现更细粒度的访问控制。
对任何潜在的身份验证失败或网络问题实施错误处理。
考虑添加其他安全措施，例如强制执行强密码策略或启用多因素身份验证，以增强用户身份验证和授权。
通过遵循这些最佳实践，您可以确保受保护页面具有更好的安全性和可维护性。
我是一名高级全栈开发人员，希望能与您合作。如果您需要我的帮助，请随时与我联系。谢谢