如何在React中保护路径?

KNVB

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

但是,当我添加以下链接时:

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

当我浏览路径时,单词“ GG”显示为未登录/protected/gg

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

因此,可以保护/protected文件夹下的所有内容吗?

如果是这样,您能告诉我该怎么做吗?或给我一个关键字,以便我可以用Google搜索解决方案。

我的工作堆积如山

德鲁·里斯(Drew Reese)

与其他答案类似,但是IMO稍微简单一些。

虽然您可以只定义一条平面的路由列表,有些可以守卫,有些则可以,但是您可以创建“围墙的守卫”(请参阅我在此处所做的工作)。

修改,GuardedRoute以有条件地渲染RouteRedirect,使所有其他道具通过。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章