1

firebaseを使ってシンプルなアプリを構築することで、ルータ(v4)を詳しく調べようとしていますが、私がやっているのは、firebaseを使ってgoogleを使ってログインしたときに別のコンポーネントにリダイレクトされ、パスを再び「/」、彼らはもはや、ログインが表示されます(私は状態に基づいてリダイレクトすることでこれをやっている)反応炉ルートに小道具を通すにはどうしたらいいですか?

私は2つの問題

を持っている私の最初の問題は、ユーザーがリダイレクトされます認証の成功の上にあります/ダッシュボードが予想どおりに戻ってくるか、ルートパスをもう一度入力すると、ログインページが短時間表示されてリダイレクトされます。私の方法が十分に速いわけではないので、componentWillMount();

私の2番目の問題は、ダッシュボードにいくつかの小道具を渡したいのですが、どうやって見ていてインターネットで検索していたのですが、どうやって実装するのか分かりません...

これは私のlogin.jsです。私はcurrentUserをダッシュ​​ボードに渡したいと思っています。また、ユーザーがログインパスに戻ったときにログインしていれば、ログインページを表示せずにすばやくリダイレ​​クトしたいと考えています...

state = { 
     currentUser: null, 
     successLogin: false 
    } 

    googleAuth =() => { 
     auth.signInWithPopup(provider).then(response => { 
      const token = response.credential.accessToken; 
      const currentUser = response.user; 
     }).catch(error => { 
      console.log(error.code , 'occured'); 
     }) 
    } 

    // firebase.auth().signInWithPopup(provider).then(function(result) { 
    // var token = result.credential.accessToken; 
    // var user = result.user; 
    // }).catch(function(error) { 
    // var errorCode = error.code; 
    // var errorMessage = error.message; 
    // var email = error.email; 
    // var credential = error.credential; 
    // }); 

    componentDidMount() { 
     auth.onAuthStateChanged(user => { 
      if(user) { 
       console.log('a user was successfuly logged in') 
       this.setState({ 
        currentUser: user.displayName, 
        successLogin: true 
       }) 
      } else { 
       console.log('eerror') 
      } 
     }) 
    } 

    componentDidUpdate() { 
     if(this.state.successLogin){ 
      this.props.history.replace("/dashboard"); 
     } else { 
      console.log('not a successful login'); 
     } 
    } 

    componentWillMount() { 
     if(this.state.successLogin){ 
      <Redirect to="/dashboard"/> 
     } 
    } 

ここに私のダッシュボードは私がログインから現在の状態を取得する方法を知らないので、ユーザーの新しい状態を作成しています...

state = { 
     user: null 
    } 

    componentDidMount(){ 
     auth.onAuthStateChanged(user => { 
      this.setState({ 
       user: user.displayName 
      }) 
     }) 
    } 
    render(){ 
     const { user } = this.state; 
     return (
      <h1> DashBoard {user}</h1> 
      ) 
    } 
} 

は、これが私のroutes.js

<BrowserRouter> 
    <div> 
      <Switch> 
      <Route path='/' exact component={Login} /> 
      <Route path='/register' component={Register} /> 
      <Route path='/dashboard' component={MainDashBoard} /> 
      </Switch> 
     </div> 
</BrowserRouter> 

私はReduxのを使用することができますが、私はまだReduxのにジャンプしたくないことを知っている

....

答えて

0

場所に.onAuthStateChangedコードですcomponentDidMountメソッドをダッシュ​​ボードとログインページではなく、ルートファイルに追加します。あなたのルートファイルがダッシュボードとログインコンポーネントの最も低い共通祖先である場合、そこで認証を処理し、ユーザを各ルートへの小道具として渡します。両方のコンポーネントで認証するのではなく、小道具に基づいてリダイレクトを処理します。あなたは<Route/>コンポーネントに直接小道具を置くことはできませんので、パブリックまたはプライベートのルート上位コンポーネントを作成し、そのルートコンポーネントを代替ルートコンポーネントとしてマージする必要があります。

私は通常、ルートファイルの一番下にこれらのファイルをポップするか、それらを独自のファイルに保存してインポートすることができます。

const renderMergedProps = (component, ...rest) => { 
    const finalProps = Object.assign({}, ...rest) 
    return React.createElement(component, finalProps) 
} 

const PublicRoute = ({ component, ...rest }) => { 
    return (
    <Route 
     {...rest} 
     render={routeProps => { 
     return renderMergedProps(component, routeProps, rest) 
     }} 
    /> 
) 
} 

const PrivateRoute = ({ component, authed, ...rest }) => { 
    return (
    <Route 
     {...rest} 
     render={routeProps => 
     authed === true ? (
      renderMergedProps(component, routeProps, rest) 
     ) : (
      <Redirect 
      to={{ pathname: '/login', state: { from: routeProps.location } }} 
      /> 
     )} 
    /> 
) 
} 

今、あなたは<Router/>コンポーネントの代わりではなく、ユーザーの小道具がで合併(または誰かが代わりになるのでかログインしている場合は、表示するためにauthedブール小道具を使用することができて、これらの高次成分を使用することができますユーザオブジェクト全体を渡し、onAuthStateChangedがユーザを登録するときにauthedブール値をstateに設定し、trueにします)。

<BrowserRouter> 
    <div> 
      <Switch> 
      <PublicRoute 
       exact 
       path='/' 
       component={Login} 
       authed={this.state.authed} /> 
      <PrivateRoute 
       path="/dashboard" 
       component={MainDashBoard} 
       user={this.state.user} 
      /> 
      </Switch> 
     </div> 
</BrowserRouter> 
+0

実際よりもはるかに複雑に思えます。これがあなたを脅かさないようにしてください。あなたのルータの学習を続行してください、あなたがコードの塊をたくさん繰り返すまで、ホックの小穴を下ってはいけません。ルーティングは、ホックを使用して最適化するよりもずっと前に快適にすべき基礎です。 –

+0

私はこれを行うもっとずっと簡単な方法を見つけました。パブリックルートの場合は、レンダリングプロップを使用できます。ランディングページのルートに5番を渡したいとします。 '' '} /> ''ブーム! –

関連する問題