Question

我想限制对某些路线的访问，我想知道以下两种方法之间的区别是什么：

方法1：

如文档所述，创建一个PrivateRoute组件，将gatsby-node.js配置为将这些路由列入白名单，并像这样捆绑您的App组件：

import numpy as np
import pandas as pd

np.random.seed(500)

e = {"rating":np.random.choice([2,4],100),
     "foo1": np.random.randint(0,2,100),
     "foo2": np.random.randint(0,2,100),
     "foo3": np.random.randint(0,2,100),
     "foo4": np.random.randint(0,2,100)}

df = pd.DataFrame(e)
df = df.set_index("rating")
print (df.groupby(df.index).apply(lambda x: x.ne(0).sum()))

#
        foo1  foo2  foo3  foo4
rating                        
2         21    21    24    19
4         32    26    24    30

PrivateRoute组件看起来像这样

import { Router } from "@reach/router"
import PrivateRoute from "../components/privateRoute"
...

const App = () => (
  <Layout>
    <Router>
      <PrivateRoute path="/app/profile" component={Profile} />
      <PrivateRoute default component={Default} />
      <Login path="/app/login" />
      <SignUp path="/app/signup" />
    </Router>
  </Layout>

)

这很好用，但是如果我想保护在页面文件夹中创建的路由怎么办？这将我们带到第二种方法。

方法2：

说我想保护在export default function PrivateRoute({ component: Component, location, ...rest }) { if (!user && location.pathname !== "/app/login") { navigate("/app/login") return null } return <Component {...rest} /> }中创建的主页。我可以像这样包装我的页面组件：

src/pages

在这里，我需要传递位置信息，因为我的页面没有包装在路由器中。但是，这种方法使我可以简单地将任何页面组件添加到PrivateRoute，而无需任何进一步的配置。

使用第二种方法是否有任何弊端？我倾向于第二种方法的主要动机是我的文件夹结构对我来说似乎更整洁并且易于遵循。另外，我只是希望能够保护直接源自我的根url的路由，而不是具有const Home = () => ( <Layout> <h1>Home Page</h1> </Layout> ) export default function HomePage({ location }) { return <PrivateRoute location={location} component={Home} /> }之类的路由。最后，如果使用第二种方法通过PrivateRoute组件保护页面路由，则看起来有些怪异。不知道这是否会视为常规。

对此表示感谢，谢谢。

盖茨比的受限路线

0 个答案: