同形アプリケーションのユーザープロフィール

Question

私は現在ログインに加えて、ログインに関連する一連の高度な機能をReact、Redux、Express、Nodeを使ってWebサイトに追加しています。実際のログインのために、私はFacebook、Google、Twitterの戦略でPassportを使用しています。必要なトークンを取得すると、AWS Cognito Federated Identitiesに送信され、ユーザーの同期データが取得されます。ウェブサイトからのデータは、必要に応じていつでもCognitoに同期されます。

ユーザーがログインした後、ノードサーバーで完全なユーザープロファイルを作成できますが、今は何ですか？戻る日で

// server.jsx 
// imports 
............. 

// variables 
............. 

var userProfile; 
// logging the user with Passport and adding it to the profile 
............. 

app.use((req, res) => { 
    // I can do whatever I want with the profile here 
    ............. 

    // handling the request and creating an initial state .. 
    ............. 
} 

、これはセッション変数（のJava/C＃の）またはクッキー（JS）のいずれかを使用して解決するために非常に簡単になるが、同型の用途においてはそれほど単純ではありません。たとえば、ログイン後にルート経由でprofile.jsxにアクセスできるとします。クッキー（クライアントセッションなどを介して設定）は、jsxファイルがクライアント上で実行されている場合にのみ使用できます。サーバーにレンダリングされるたびにアクセスできません。

isomorphic-cookieやuniversal-cookieのようなものを使用していても、同形アプリケーションの目的を遥かに凌駕するカスタムコードが必要なようです。私はReduxを使うことも考えましたが、ReduxはNode上の初期状態しか持たないように見えますが、あまり役に立ちません。

// Profile.jsx 
import React , { Component } from 'react'; 
import Cookies from 'universal-cookie'; 

class Profile extends Component { 
    // Stuff 
    ............. 

    render() { 
     // Would love to be able to access to the profile without custom code like this 
     if (typeof window != 'undefined' && window.document) { 
      const cookies = new Cookies(); 
      console.log(cookies.get('user')); 
     } 
    } 

だから、シナリオごとにカスタムコードの膨大な量を記述することなく、すべての回でのユーザープロファイルか、にアクセスしたい他の変数を扱うの円滑な方法は何ですか？たいていのチュートリアルやサンプルでは、​​このようなことをサーバーやクライアントだけで扱うようです。この場合、この特定のケースではWebサイトを書き直す必要があります。

ほとんどの場合、同形アプリケーションはかなり単純ですが、複雑さは認証、プロファイルなどが導入されたときに実際に屋根を突き抜けます。

Answer 1

ここでは、認証手順を追加し、Cookieとして、または後続のクエリでプロファイルAPIに戻したアプリ状態で、成功した認証トークンを保存することが一般的なシナリオだと思います。

APIから返されるデータはReduxストアに追加することもできます。変更を保持するか、現在の状態データを強制的に更新する必要がある場合は、常にアクセスして更新できます。