我在哪里调用身份验证检查 mixin答案

【问题标题】：Where do I call the authentication checking mixin我在哪里调用身份验证检查 mixin
【发布时间】：2016-09-16 21:08:52
【问题描述】：

在我的 react 应用程序中，我有一个组件 currentUserMixin 用于管理用户登录。

我希望我的LoginComponent（显示登录表单）在用户已经登录时不可见。

看了How to restrict access to routes in react-router?这里之后，我在currentUserMixin创建了这个组件：

NeedsUnAuthenticatedUser: {
      statics: {
        willTransitionTo: function(transition) {
          if(this.authenticated()) {
            transition.abort();
          }
        }
      }
    }

我现在的问题是我不知道在哪里添加这个组件。

我是否应该像这样将它添加到主应用程序组件中：

export default class App extends Component {
    mixins: [currentUserMixin.NeedsUnAuthenticatedUser]

还有这个：

<Route path="auth" component={AuthIndex}>
                        <Route path="login" component={LoginComponent} onEnter={willTransitionTo} />
                        <Route path="register" component={RegisterComponent} />
                    </Route>

或者我应该像这样把它放在实际的登录组件中：

export default class LoginComponent extends Component {
    mixins: [currentUserMixin.NeedsUnAuthenticatedUser]

那么我应该把这个 mixin 放在哪里呢？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

Mixins 不适用于 ES6 类。如果你想使用 mixins，那么你应该使用React.createClass()。正常使用 ES6 类时，您可以使用高阶组件来实现您想要的：

function getDisplayName (WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}


function needsUnAuthenticatedUser (Component) {

  class WrapperComponent extends Component {
    authenticated () {
       //...
    }

    willTransitionTo (transition) {
      if(this.authenticated()) {
        transition.abort();
      }
    }

    render () {
      return <Component {...this.props} />
    }
  }
  // This is just to display nice stacktraces / inspector name for the component
  WrapperComponent.displayName = `NeedsUnAuthenticatedUser(${getDisplayName(Component)})`

  return WrapperComponent
}

// Usage example:

class ProfilePage extends Component {
  render () {
    return <div>I should be accessible only if user is not logged in...</div>
  }
}

export default needsUnAuthenticatedUser(ProfilePage)
// or const authedProfilePage = needsUnAuthenticatedUser(ProfilePage)

查看这个以获得非常好的解释： https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.wy6wkysw8

如果你愿意，你可以使用路由的onEnter钩子来重定向已经登录的用户，但在这种情况下你也不会使用mixin，只是一个普通的函数：

function checkUserAlreadyLoggedIn (nextState, replace) {
    // put some logic here to decide if use need to redirect
    if (alreadyLoggedIn) {
       replace(/your-redirect-url)
    }
}

const routes = (<Route path="/" component={App}>
     <Route path="/foo" onEnter={checkUserAlreadyLoggedIn} component={LoginForm} />
</Route>)

【讨论】：