时间戳

首页 > 解决方案 > 如何保护 React 中的路径？

javascript - 如何保护 React 中的路径？

问题描述

我按照这个页面创建了一个 React 应用程序，它运行良好。

但是，当我添加以下链接时：

 <li>
     <Link to='/protected/gg'>
         Link to Protected Page GG
     </Link>
 </li>

浏览路径时显示“GG”一词，无需登录/protected/gg。

似乎GuardedRoute只能保护/protected路径。

那么，是否可以保护/protected文件夹下的所有内容？

如果是这样，你能告诉我该怎么做吗？或者给我一个关键字，以便我可以搜索解决方案。

我的工作的 Stackblitz

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

与其他答案类似，但 IMO 更简单一些。

虽然您可以只定义一个平面的路线列表，一些有保护，一些没有，但您可以创建“围墙保护”（看看我在那里做了什么）。

修改你GuardedRoute的有条件地渲染一个Routeor Redirect，传递所有其他道具。

const GuardedRoute = ({ auth, ...rest }) => {
  return auth ? <Route {...rest} /> : <Redirect to="/" />;
};

然后只需在路由器中创建一个“受保护”部分。请记住，Switch组件内的路由顺序很重要，因此在 *不太具体的路径之前排序更具体的路径。

<Switch>
  <Route exact path="/" component={Home} />
  <GuardedRoute path="/protected" auth={isAutheticated}>
    <Switch>
      <Route path="/protected/gg" component={GG} />
      <Route path="/protected" component={Protected} />
    </Switch>
  </GuardedRoute>
  <Route path="/unprotected" component={Unprotected} />
</Switch>

我通常使用codesandbox，但如果这个分叉的stackblitz 无法加载，请告诉我。

https://react-mjyp8g.stackblitz.io

推荐阅读