Reactjs 如何将页面限制为仅登录用户

我想保护一些URL，以便用户在没有先登录的情况下无法访问它们。这是我的Auth.js

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
    const [currentUser, setCurrentUser] = useState(null);
    useEffect(() => {
        firebase.auth().onAuthStateChanged(setCurrentUser);
    }, []);

    return (
        <AuthContext.Provider
            value={{ currentUser }}
        >
            {children}
        </AuthContext.Provider>
    );
};

export const AuthContext=React.createContext（）；
导出常量AuthProvider=（{children}）=>{
const[currentUser，setCurrentUser]=useState（null）；
useffect（（）=>{
firebase.auth（）.onAuthStateChanged（setCurrentUser）；
}, []);
返回(
{儿童}
);
};

这是我的App.jsx

function App() {
return (
    <AuthProvider>
        <Router>
            <div>
                <Route path="/citas" exact>
                    <CitasPage />
                </Route>
                <Route path="/citasDetalladas" exact>
                    <CitaDetallada />
                </Route>
                <Route path="/crearCita" exact>
                    <CrearCitasPage />
                </Route>
                <PrivateRoute path="/index" exact >
                    <Index />
                </PrivateRoute>
            </div>
        </Router>

    </AuthProvider>
    );
}

export default App;

函数应用程序（）{
返回(
);
}
导出默认应用程序；

---

因为我是React新手，所以我一直在遵循使用Firebase和React进行登录和注销的教程，但这对解决这个问题没有帮助。有什么想法吗？

您需要做一些事情来确定用户当前是否经过身份验证。我不确定firebase.auth（）是如何工作的，但您需要检查每个路由（或使用高阶组件）上的用户是否经过身份验证，如果没有，返回

，您需要做一些事情来确定用户当前是否经过身份验证。我不确定firebase.auth（）是如何工作的，但您需要检查每个路由（或使用高阶组件）是否对用户进行了身份验证，如果没有，则返回

您可以使用此身份验证流保护路由不受未经身份验证的用户的影响。
我已使用maintain currentUser创建了全局上下文。
由当前用户决定路由

AuthProvider.js

import React，{createContext，useState，useffect}来自“React”；
从“/firebase”导入firebase；
export const AuthContext=createContext（）；
导出函数AuthProvider（{children}）{
useffect（（）=>{
设置加载（真）；
firebase.auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
setCurrentUser（用户）；
设置加载（假）；
}否则{
设置加载（假）；
setCurrentUser（空）；
}
});
}，[setCurrentUser，setRole，setIsLoading]）；
返回(
{儿童}
);

App.js

从“React”导入React；
从“react Router dom”导入{HashRouter as Router}；
从“/data/auth”导入{AuthProvider}”；
函数App（）{
返回(
);
}
导出默认应用程序；

Routes.js

import React，{useContext}来自“React”
从“react router dom”导入{交换机、重定向、路由}；
从“./data/auth”导入{AuthContext}；
常数路由=（）=>{
const{currentUser}=useContext（AuthContext）；
如果（当前用户）{
报税表（
)
}否则{
报税表（
)
}
}
导出默认路径；

您可以使用此身份验证流保护路由免受未经身份验证的用户的攻击。
我已使用maintain currentUser创建了全局上下文。
由当前用户决定路由

AuthProvider.js

import React，{createContext，useState，useffect}来自“React”；
从“/firebase”导入firebase；
export const AuthContext=createContext（）；
导出函数AuthProvider（{children}）{
useffect（（）=>{
设置加载（真）；
firebase.auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
setCurrentUser（用户）；
设置加载（假）；
}否则{
设置加载（假）；
setCurrentUser（空）；
}
});
}，[setCurrentUser，setRole，setIsLoading]）；
返回(
{儿童}
);

App.js

从“React”导入React；
从“react Router dom”导入{HashRouter as Router}；
从“/data/auth”导入{AuthProvider}”；
函数App（）{
返回(
);
}
导出默认应用程序；

Routes.js

import React，{useContext}来自“React”
从“react router dom”导入{交换机、重定向、路由}；
从“./data/auth”导入{AuthContext}；
常数路由=（）=>{
const{currentUser}=useContext（AuthContext）；
如果（当前用户）{
报税表（
)
}否则{
报税表（
)
}
}
导出默认路径；

谢谢你的回答。我应该在每个受限页面上都这样做？谢谢你的回答。我应该在每个受限页面上都这样做？请注意，除了管理前端的导航流之外，绝对有必要使用安全规则在后端实现授权。OP没有指明他为我们提供了哪些服务es（Firestore？RTDB？），但每个服务都有其特定的设置方式。请注意，除了管理前端的导航流外，绝对有必要使用安全规则在后端实现授权。OP没有指明他使用的服务（Firestore？RTDB？）但每项服务都有其特定的设置方式。

import React, { createContext, useState, useEffect } from "react";
import firebase from "./firebase";


export const AuthContext = createContext();
export function AuthProvider({ children }) {

useEffect(() => {
    setIsLoading(true);
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        setCurrentUser(user);
        setIsLoading(false);
      } else {
        setIsLoading(false);
        setCurrentUser(null);
      }
    });
  }, [setCurrentUser, setRole, setIsLoading]);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );

import React from "react";
import { HashRouter as Router } from "react-router-dom";
import { AuthProvider } from "./data/auth";

function App() {
return (
        <AuthProvider>
          <Router>
            <Routes />
          </Router>
        </AuthProvider>
  );
}

export default App;

import React, { useContext } from 'react'
import { Switch, Redirect, Route } from 'react-router-dom';
import { AuthContext } from "../data/auth";

const Routes = () => {
    const { currentUser } = useContext(AuthContext);
if (currentUser) {
        return (    
            <Switch>
                <Route path='/dashboard' component={dashboard} />
                <Route path='/report' component={report} />
                <Route path='/profile' component={profile} />
                <Redirect to='/report' />
            </Switch>
        )
    } else {     
        return (    
            <Switch>
                <Route path='/login' component={login} />
                <Route path='/register' component={register} />
                <Redirect to='/login' />
            </Switch>
        )
    }
}
export default Routes;