reagieren Router App machen und anmelden

Question

Ich habe diese Route:

<Route path="/" component={App}> 
     <Route path="login"> 
      <IndexRoute component={LoginPage}/> 
     </Route> 
     <Route onEnter={requireAuth}> 
      <IndexRoute component={DashboardPage} /> 
      <Route path="accounts"> 
       <IndexRoute component={AccountPage}/> 
       <Route path="add" component={AccountAdd} /> 
       <Route path="detail/:id" component={AccountDetail} /> 
      </Route> 
      <Route path="contacts"> 
       <Route path="detail/:id" component={ContactPage}/> 
      </Route> 
      <Route path="transmissors"> 
       <Route path="detail/:id" component={TransmissorPage}/> 
      </Route> 
      <Route path="attends" component={AttendancePage} /> 
      <Route path="reports" component={ReportPage} /> 
      <Route path="configs" component={ConfigurationPage} /> 
     </Route> 
    </Route> 

Inside my App Komponente möchte ich eine bedingte haben, um die Login-Seite und die App-Seite zu machen.

Ich weiß nicht, wie diese bedingte in meiner App zu tun.

Hier ist meine App-Code:

class App extends React.Component{ 
    constructor(props) { 
     super(props); 
     console.log(this.props.children.type.name); 
    } 

    render() { 

     const loginRender = this.props.children.type.name == "LoginPage"; 
     const appRender = this.props.children.type.name != "LoginPage"; 

     return (


      {loginRender(
       <div className="app-container"> 
        {this.props.children} 
       </div> 
      )} 

      {appRender(
       <div className="app-container"> 
        <Header /> 
        <Sidebar /> 
        <Middle app={this.props.children}/> 
       </div> 
      )} 



     ); 
    } 
} 

export default App 

Ich weiß nicht, ob this.props.children.type.name benutzen Sie die Loginpage beste Weg, oder eine gute pratice ist.

Answer 1

Mit reagieren-Router OnEnter Methode, die Sie brauchen, um Überprüfen Sie, ob der Benutzer authentifiziert wird, bevor Sie die App-Komponente mounten, und leiten Sie den Benutzer auf "/ login" um, wenn er nicht authentifiziert ist. Sie müssen LoginPage nicht innerhalb der App-Komponente rendern. Zum Beispiel:

//I use here token authentication, but it can be adopted easily in your case 
function redirect(nextState, replace) { 
    if (auth.loggedIn()) { 
    replace('app'); 
    } else { 
    replace('login'); 
    } 
} 

function redirectHome(nextState, replace) { 
    if (auth.loggedIn()) { 
    replace('app'); 
    } 
} 

function requireAuth(nextState, replace) { 
    if (!auth.loggedIn()) { 
    replace('login'); 
    } 
} 

<Router history={hashHistory}> 
    <Route path="login" component={Login} onEnter={redirectHome}/> 
    <Route path="app" component={Layout} onEnter={requireAuth}> 
     <IndexRoute component={Dashboard}/> 
     <Route path="accounts" component={Accounts}/> 
     <Route path="settings" component={Settings}/> 
    </Route> 
    <Route path="*" onEnter={redirect}/> 
</Router> 

in diesem Beispiel Login-Seite Login Komponente gerendert wird

Answer 2

können Sie die onEnter Methode in Ihre Route mit reagieren-Router

Werfen Sie einen Blick auf diese example

Sie das sehen EnterHook