react-router授权

IT技术 javascript reactjs authorization react-router
2021-03-28 23:22:36

在组件安装之前进行授权检查的最佳做法是什么？

我使用react-router 1.x

这是我的路线

React.render((
  <Router history={History.createHistory()}>
    <Route path="/" component={Dashboard}></Route>
    <Route path="/login" component={LoginForm}></Route>
  </Router>
), document.body);

这是我的仪表板组件：

var Dashboard = React.createClass({
  componentWillMount: function () {
    // I want to check authorization here
    // If the user is not authorized they should be redirected to the login page.
    // What is the right way to perform this check?
  },

  render: function () {
    return (
      <h1>Welcome</h1>
    );
  }
});
3个回答

React router v4 的更新解决方案 

<Route 
  path="/some-path" 
  render={() => !isAuthenticated ?
    <Login/> :
    <Redirect to="/some-path" />
}/>

react-router到 v3

使用 'onEnter' 事件并在回调中检查用户是否获得授权： 

<Route path="/" component={App} onEnter={someAuthCheck}>  

const someAuthCheck = (nextState, transition) => { ... }
对于来自 Google 搜索的那些：onEnter不再存在于react-router-4。请参阅：stackoverflow.com/questions/42768620/...
2021-06-02 23:22:36
@Green 这里可能有些混乱：您是说您应该使用来自州的信息。但是在一个onEnter函数中，您可以简单地访问您的简单状态变量（状态是函数的第一个参数），从而不需要额外的 ajax 请求
2021-06-03 23:22:36
在示例和文档方面，情况变得更糟。“auth-flow”示例对我不起作用，并且很难找到有关处理程序的第二个参数应该接受什么的信息，以便我可以尝试不同的事情。
2021-06-10 23:22:36
onEnter(nextState, replace, callback?) “当一个路由即将进入时调用。它提供下一个路由状态和一个重定向到另一个路径的函数。这将是触发钩子的路由实例。”
2021-06-10 23:22:36
不。不是一个好的解决方案。通常，您会保留有关您所在州的授权信息。像这样，例如：'isAuth: true'。你在你的组件中有这个变量作为道具，你只需将它自己传递到你需要的地方。但是您不能将任何状态变量传递给“路由”。因此，您不得不从“路由”向您的服务器发出“获取”调用、Ajax 请求以判断用户是否已登录。使用简单的状态变量并发出具有相同目的的 Ajax 请求是无稽之谈和糟糕的设计.
2021-06-17 23:22:36

使用 react-router 4，您可以访问组件内的Route props。要重定向用户，您只需将新 URL 推送到历史记录。在您的示例中，代码将是：

var Dashboard = React.createClass({
  componentWillMount: function () {
    const history = this.props.history; // you'll have this available
    // You have your user information, probably from the state
    // We let the user in only if the role is 'admin'
    if (user.role !== 'admin') {
      history.push('/'); // redirects the user to '/'
    }
  },

  render: function () {
    return (
      <h1>Welcome</h1>
    );
  }
});

在文档中，他们展示了另一种方法，通过使用render属性而不是component. 他们定义了一个PrivateRoute，当你定义所有的路由时，这使得代码非常明确。

如果你想对多个组件应用授权，那么你可以这样做。

<Route onEnter={requireAuth} component={Header}>
    <Route path='dashboard' component={Dashboard} />
    <Route path='events' component={Events} />
</Route>

对于单个组件，您可以执行 

<Route onEnter={requireAuth} component={Header}/>

function requireAuth(nextState, replaceState) {
  if (token || or your any condition to pass login test)
  replaceState({ nextPathname: nextState.location.pathname }, 
  '/login')
}
其它你可能感兴趣的问题
上一篇构建后 index.html 中的相对路径 下一篇如何在 Atom 编辑器上为 React 配置 ESLint