如何在react-router中限制对路由的访问?

JavaScript React.js

西门蛋蛋JinJin

2020-03-17

有谁知道如何在react-router中限制对特定路由的访问?我想在允许访问特定路由之前检查用户是否已登录。我以为这很简单,但是文档尚不清楚该怎么做。

这是我应该在定义<Route>组件的位置设置的东西,还是应该在组件处理程序中处理的东西?

<Route handler={App} path="/">
  <NotFoundRoute handler={NotFound} name="not-found"/>
  <DefaultRoute handler={Login} name="login"/>
  <Route handler={Todos} name="todos"/> {/* I want this to be restricted */}
</Route>

第1864篇《如何在react-router中限制对路由的访问?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
阿良 2020.03.17

通常,已登录的用户将被授予令牌,并将该令牌用于与服务器的任何通信。我们通常要做的是定义一个根页面,然后在该页面的顶部进行构建。该根页面为您执行本地化,身份验证和其他配置。

这是一个例子

Routes = (
    <Route path="/" handler={Root}>
        <Route name="login" handler={Login} />
        <Route name="forget" handler={ForgetPassword} />
        <Route handler={Main} >
            <Route name="overview" handler={Overview} />
            <Route name="profile" handler={Profile} />
            <DefaultRoute handler={Overview} />
        </Route>
        <DefaultRoute handler={Login} />
        <NotFoundRoute handler={NotFound} />
    </Route>
);

在您的根页面上,检查令牌是否为null或使用服务器对令牌进行身份验证,以查看用户是否有效登录。

希望这可以帮助 :)

阿飞Sam 2020.03.17

您可以使用HOC并且auth是一个变量,您可以更改值true或false表示(授权)

<Route path="/login" component={SignIn} />
<Route path="/posts" render = {() => (auth ?  (<Post />) : (<Redirect to="/login" />))}/>
A阿飞前端 2020.03.17

react-router 如果您鼓励路由器采用声明式方法,则应使路由器尽可能地笨拙,并避免将路由逻辑放入组件中。

这是您的操作方法(假设您将loggedIn道具传递给它):

const DumbRouter = ({ loggedIn }) => (
  <Router history={history}>
    <Switch>
      {[
        !loggedIn && LoggedOutRoutes,
        loggedIn && LoggedInRouter,
        <Route component={404Route} />
      ]}
    </Switch>
  </Router>
);

const LoggedInRoutes = [
  <Route path="/" component={Profile} />
];

const LoggedOutRoutes = [
  <Route path="/" component={Login} />
];

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android