27、Firebase认证与预算应用样式设计全解析

Firebase认证与预算应用样式设计全解析

1. Firebase认证路由管理

1.1 私有路由（Private Only Routes）

在许多应用程序中，某些页面或功能仅允许已认证的用户访问，这就需要实现私有路由。借助Firebase认证库可以轻松实现这一功能，以下是具体步骤：
1. 创建高阶组件（HOC） ：创建一个高阶组件来包装需要保护的组件，该组件会检查用户是否已认证，如果未认证则将用户重定向到登录页面。

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

function PrivateRoute({ component: Component, ...rest }) {
    const { currentUser } = useAuth();
    return (
        <Route
            {...rest}
            render={(props) =>
                currentUser ? <Component {...props} /> : <Redirect to='/login' />
            }
        />
    );
}
export default PrivateRoute;