反応ルータのセキュリティを確保する

Question

私の反応アプリケーションをログインで保護したい。私は私の反応のアプリケーションで3つの画面があります。しかし、各画面のURLのうち、保護されていないものは保護されています。私は直接任意のページのURLを入力することができ、localhostは対応するページに私を連れて行く。私が望むのは、ユーザーがログインしていない限り、メインURL以外のURL（ログイン画面に誘導するURL）を入力するたびにログイン画面にリダイレクトする必要があることです。

私はすでにいくつかのことを試みました。このような私のルータを持っているように

function authorize(){ 
    console.log('inside') 
    if(window.localStorage.token == undefined) { 

     browserHistory.push('/') 
    } 
} 
function getRoutes(store) { 

    return (
     <Router history={browserHistory}> 
      <Route path="/" component={LoginPage}/> 
      <Route path='app' component={App} onEnter={()=>{authorize()}}> 
       <IndexRoute component={Home}/> 
       <Route path='/video-screen' component={VideoScreen}> 
        <IndexRoute component={TagList}/> 
        <Route path='/add' component={AddTags}/> 
        <Route path='/TagList' component={TagList}/> 
        <Redirect from='*' to='/'/> 
       </Route> 
      </Route> 
     </Router> 
    ) 
} 
export default getRoutes; 

そして、このようなログイン画面から私のログイントークンを保存しています。これは私のログインコンポーネントからのもので、成功したログイン時にトークンを返すapiへのajax呼び出しを行います。

$.ajax(settings).done((response) => { 
      token = response.auth_token; 
      window.localStorage.token_auth = token; //store in localstorage 
      this.context.router.push('/app') 
     }); 

しかし、私は私のローカルホストに行くときにこれを実行した後：3000 /アプリケーションのURLをログインせずに、それはページに私を取り、ログインページに私をリダイレクトしません。私は間違って何をしていますか？

Answer 1

私のプロジェクトでこの方法を使用すると、基本的に、ユーザーがログに記録されているかどうかを制御するすべてのプライベートルートがルーティングされます。

私はonEnterを使ってメソッドを使用しましたが、コンポーネントはあなたがログインしているものをマウントします。

// routes.js 
<Route path='books' component=...> 
<Route component={CheckLogin}> 
    <Route path='secret-books' component=.../> 
</Route> 

// ChcekLogin.js 
// stateless component 
function ChcekLogin({isLogged, children}){ 
    if(isLogged) 
    return children 

    return <div>Logged users only</div> 
}