Javascript 在React中验证多个路由

我的React应用程序中有多条路由，我希望在允许用户访问路由之前检查登录状态是否为true。我一直在尝试跟踪堆栈溢出的答案，比如创建一个私有路由，但是所有的答案似乎都只显示了使用此方法的一个路由。用多条路线实现这一点的最佳方法是什么？我自己也尝试过，但它并没有真正起作用，因为它只显示item组件，而没有显示其他内容，正如我在PrivateRoute中指定的那样

这是我的app.js：

import React, { useContext } from "react";
import { Switch, Route} from "react-router-dom";
import { LoggedInProvider } from "./contexts/LoggedIn";
import { ThemeProvider } from "./contexts/ThemeContext";
import SignIn from "./SignIn";
import PrivateRoute from "./PrivateRoute"
import "./App.css";

function App() {
  return (
    <LoggedInProvider>
      <ThemeProvider>
        <Switch>
          <Route exact path="/" render={() => <SignIn />} />
          <PrivateRoute path="/items" />
        </Switch>
      </ThemeProvider>
    </LoggedInProvider>
  );
}

export default App;

import React，{useContext}来自“React”；
从“react router dom”导入{Switch，Route}；
从“/contexts/LoggedIn”导入{LoggedInProvider}；
从“/contexts/ThemeContext”导入{ThemeProvider}”；
从“/sign”导入登录；
从“/PrivateRoute”导入PrivateRoute
导入“/App.css”；
函数App（）{
返回(
} />
);
}
导出默认应用程序；

这是我的私人路线代码，我不希望非登录用户访问：

import React, { useContext } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import { LoggedInContext } from "./contexts/LoggedIn";
import Index from "./CRUD/index";
import NewItem from "./CRUD/NewItem";
import EditItem from "./CRUD/EditItem";
import GroupIndex from "./Groups/GroupIndex";
import NewGroup from "./Groups/NewGroup";

export default function PrivateRoute() {
  const { loggedIn } = useContext(LoggedInContext);
  return (
    <Switch>
      <Route
        exact
        path="/items"
        render={() => (loggedIn ? <Index /> : <Redirect to="/" />)}
      />
      <Route
        exact
        path="/items/new"
        render={() => (loggedIn ? <NewItem /> : <Redirect to="/" />)}
      />
      <Route
        exact
        path="/items/edit/:id"
        render={props =>
          loggedIn ? <EditItem {...props} /> : <Redirect to="/" />
        }
      />
      <Route
        exact
        path="/groups"
        render={() => (loggedIn ? <GroupIndex /> : <Redirect to="/" />)}
      />
      <Route
        exact
        path="/groups/new"
        render={() => (loggedIn ? <NewGroup /> : <Redirect to="/" />)}
      />
    </Switch>
  );
}

import React，{useContext}来自“React”；
从“react router dom”导入{重定向、路由、交换机}；
从“/contexts/LoggedIn”导入{LoggedInContext}；
从“/CRUD/Index”导入索引；
从“/CRUD/NewItem”导入新项目；
从“/CRUD/EditItem”导入EditItem；
从“/Groups/GroupIndex”导入GroupIndex；
从“/Groups/NewGroup”导入新组；
导出默认函数PrivateRoute（）{
const{loggedIn}=useContext（LoggedInContext）；
返回(
（loggedIn？：）}
/>
（loggedIn？：）}
/>
罗格丁
}
/>
（loggedIn？：）}
/>
（loggedIn？：）}
/>
);
}

查看下面的代码并尝试自己实现

const PrivateRoute = ({ component: Component, render, ...rest }) => {

  const renderContent = props => {
    if (!isLogin) {
      return (
        <Redirect
          to={{
            pathname: "/auth",
            state: { from: props.location }
          }}
        />
      );
    }

    return typeof render === "function" ? (
      render(props)
    ) : (
      <Component {...props} />
    );
  };
  return <Route {...rest} render={renderContent} />;
};

const PrivateRoute=（{component:component，render，…rest}）=>{
const renderContent=props=>{
如果（！isLogin）{
返回(
);
}
返回typeof render==“函数”(
渲染（道具）
) : (
);
};
返回；
};

然后在app.js中

      <PrivateRoute path="/items" component={/*Component Name*/}  />

您不应该在前端执行授权。在前端，您无法阻止恶意用户使用浏览器的javascript控制台或react-dev工具来操纵与身份验证相关的变量/组件状态

正如另一个答案中提到的，这可能会有问题，因为它不是很安全

<>你可能想看看膝关节炎或表达这将允许你做服务器侧路由，这是更安全的。通过从前端抽象代码，您还可以从更干净的代码中获益

---

有一个教程

用户可以通过浏览器控制台操作isLogin，但不能在前端进行身份验证。@mancini0这是一个示例代码，不是产品代码！。我已经提到“尝试为自己实现”，从中删除-1，这实际上是唯一试图回答这个问题的答案。@James，谢谢你，我认为这对其他人来说是一个误解。我想你已经看过文档中的？您似乎正在将许多路由捆绑到单个

PrivateRoute

组件中，该示例演示了一种实现可重用路由的方法，然后您为要保护的每个路由声明该路由没有实现

LoggedInContext

，为什么您假定OP正在客户端上执行身份验证？利用服务器状态保护客户端上的路由是正常的（顺便说一句，我不是下行投票者）。无论实现是什么，都可以通过浏览器控制台重新分配。您将身份验证与授权混淆，您可能能够在客户端伪造授权，但一旦客户端尝试执行任何操作（例如从API获取敏感数据），它将立即失败，因为用户未经过身份验证。“这种方法没有错，关键是有多少水疗中心可以工作。”詹姆斯更新了我的答案，用了“授权”这个词。OP询问限制用户查看已呈现（但弱隐藏）的react组件，即授权。没有实现

LoggedInContext

，为什么您认为OP正在客户端上进行身份验证？利用服务器状态保护客户端上的路由是正常的。如果我跳到了一个假设，我深表歉意，但OP确实提到他们不希望未登录的用户具有访问权限：）