API-RequestのクライアントサイドアプリケーションにユーザIDを格納する

Question

ユーザコントローラにGET要求を行うNode-Express REST APIがあります。/users/:id - :idはデータベースに格納されているユーザID番号です。私はまた、APIを呼び出すReact-Reduxクライアント側のアプリケーションを持っています。要求を行うために、クライアントアプリケーションはuser-idにアクセスする必要がありますが、現在のところ、クライアント側にuser-idを格納する最良の方法は不明です。

追加のコンテキストでは、私のAPIは、ユーザIDを保持するログイン時にJWT tokenをクライアントに送信します。クライアントアプリケーションはlocalStorageにトークンを保存します。クライアントがリクエストを行うと、APIはデコードされたトークンのuser-idがURLに含まれるIdと一致することを確認してから、クライアントに応答を返します。

私は2つの潜在的な解決策を参照してください。クライアントにJWTトークンをデコードし、API呼び出しを行うために、トークンに格納されているユーザーIDを使用し

1. を。私はクライアントアプリケーションに秘密を保存する必要があると考えているので、これは潜在的なセキュリティ上のリスクだと思います。また、トークンを持っているユーザーは、ユーザーの情報にアクセスできます。
2. APIは認証時にuser-idを送信し、クライアントはlocalStorageにそれを保存します。 （私はReduxストアに保存するとユーザーIDの状態を消去してリフレッシュすることができないと思います）。私の感覚は、これはベストプラクティスではないということです。なぜなら私はこのアプローチをとっている他の多くのクライアントサイドのアプリを見ていないからです。

2つのうちどちらが優れた解決策ですか、それとも私が検討していない別のアプローチですか？あなたは:idが提供されたかどうかを確認していない場合、その後、あなたのJWTトークンからIDを抽出することができ、あなたの/users/:idエンドポイントで

Answer 1

を使用することができます。 トークンクライアント側をデコードしないでください。そうすれば、クライアントサイドのコードは、あなたのJavascriptを見ている人に公開される「秘密」を知る必要があります。

オプション＃2はセキュリティ上の理由からトークンを送信することを前提としています。保存するには、それをクッキーまたはlocalStorageに保存するか、リフレッシュ時に失われると言うように保存する必要があります。

IDをクライアント側のコードで取得するには、クライアント側のコードでcookie/localstorageからIDを読み取らせます。そのためのライブラリがあります。反応クッキーは、例えば、クッキーを読み取る。アクセスする必要があるたびに、または最初のページ読み込み中に一度読み込んでから、Reduxストアにディスパッチすることができます。

Answer 2

は、そうでない場合は、API呼び出しに渡されたidを使用しています。

それが受け入れられない場合は、オプション＃2を使用しますが、あなたはオプション＃1についての正しいsessionStorage代わりのlocalStorage