[React]~MovieApp-router3: JWT Tokenのハンドリングを実装しよう!

こんにちは、KOUKIです。

GolangとReactでMovie Appの開発をしています。

今回は、フロントエンド側(React)でJWT Tokenのハンドリング処理を実装します。

尚、Udemyの「Working with React and Go (Golang)」を参考にしているので、よかったら受講してみてください。

前回

Login APIへリクエストを送信する処理を実装しました

事前準備

フォルダ/ファイル

モジュール

package.json

JWT Tokenのハンドリング

ログインの仕組みですが、適切なユーザー情報をAPIへ送信後JWT Tokenを発行し、ログイン認証済みであることを証明します。

そして、ログアウトをすることでJWT Tokenを削除し、未ログインの状態に戻します。

つまり、JWT Tokenの取扱には十分気をつける必要があるということです。

ログイン成功時

ログイン成功時のJWT Tokenのハンドリングを実装しましょう。

ログイン成功時のレスポンスは、JWT TokenなのでuseStateで用意したjwt変数に格納しました。そして、admin画面に遷移するようにpropsのhistory.pushを追加しています。

実際にログインしてみましょう。

成功!と言いたいところですが、よくみると「login」ボタンのままだったり、ログインした時に表示される「Add Movie」、「Manage Catalog」メニューが表示されていません。

実は、現在の処理ではLoginコンポーネント内でしかJWT Tokenを保持しないので、別の方法を考える必要があります。

Reduxの導入

今回は、Reduxを導入して対処することにしましょう。

Reduxは、actionというイベントを使ってstateを状態を管理するReactのフレームワークです。

詳しい内容は下記の記事で解説しているので、よかったら一読してください。

Actionの実装

JWTをセットするActionを実装します。

Reducerの実装

Actionが実行されたら新しくStateを作成し、JWTを保存します。そのために、Reducerを実装します。

Configure

ReducerをRedux Storeに登録します。

Provider

先ほど登録したRedux Storeをアプリケーション内で利用できるようにします。

AppコンポーネントをReduxに登録

AppコンポーネントにReduxを登録します。そのために、まず関数の作り方を変えます。

続いて、state及びdispatchの定義とstoreへの登録処理を実装します。

DispatchはStateを変更するときのトリガーになるものです。また、StateをPropsに変更し、子コンポーネントに値を伝搬できるようにしました。

LoginコンポーネントをReduxに登録

LoginコンポーネントもReduxに登録します。ここで重要になってくるのが、Dispatchです。

Appコンポーネントと同じようにRedux Storeに登録処理を行いました。またdispatchを登録しているので、setJWTをpropsから呼び出すことが可能となり、JWTをRedux Storeに登録することができるようになりました。

ログイン判定の変更

propsからJWTを取り出すことができるようになったので、Appコンポー円んとのログイン判定処理を変更します。

検証

それでは、検証をしてみましょう。

OKですね。ログインからログアウトまで機能することが確認できました。

Reduxの実装は少し複雑ですが、かなり便利ですね。

次回

次回は、Tokenのチェック処理などを実装します。

記事まとめ

参考書籍

ソースコード

Login.tsx

tokens.ts

App.tsx

index.tsx

configureStore.ts

setJWTAction.ts

setJWTReducer.ts

コメントを残す