Где я называю проверку подмешать

Question

аутентификации В моих среагировать приложения У меня есть компонент 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] 

Итак, где именно я должен помещать этот миксин?

Answer 1

Микшины не работают с классами 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>)