反应路由器授权 [英] React Router Authorization

问题描述

什么是授权的组件之前，检查安装的最佳实践？

我用反应路由器的1.x

下面是我的路线

React.render（（
  ＆LT;路由器记录= {History.createHistory（）}＆GT;
    ＆LT;路由路径=/组件= {}仪表板和GT;＆LT; /路由＆GT;
    ＆LT;路由路径=/登录组件= {} LoginForm的GT＆;＆LT; /路由＆GT;
  ＆LT; /路由器＆GT;
），document.body的）;


下面是我的仪表板组件：

VAR仪表板= React.createClass（{
  componentWillMount：功能（）{
    //我想在这里检查授权
    //如果用户未得到授权，他们应重定向到登录页面。
    //什么是执行此检查的正确方法？
  }，  渲染：功能（）{
    返回（
      ＆LT; H1＆GT;欢迎及LT; / H1＆GT;
    ）;
  }
}）;


解决方案

我想你可以使用'的OnEnter'事件，并在回调检查，如果用户被授权：

＆LT;路由路径=/组件= {}应用=的OnEnter {someAuthCheck}＆GT;VAR someAuthCheck =功能（nextState，转移）{...}


What are the best practices for authorization checking prior to a component mounting?

I use react-router 1.x

Here are my routes

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

Here is my Dashboard component:

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>
    );
  }
});

解决方案

I think you can use 'onEnter' event and in callback check if the user is authorized:

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

var someAuthCheck = function(nextState, transition) { ... }

这篇关于反应路由器授权的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！