[React]~MovieApp-router4: JWT Tokenのチェック処理を実装しよう!

こんにちは、KOUKIです。

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

今回は、JWT Tokenのチェック処理を実装します。

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

前回

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

事前準備

フォルダ/ファイル

imagesフォルダ配下に「movie_tickets.jpg」ファイルを格納します。

モジュール

JWT Tokenの存在チェック

現状、未ログインの場合はadminページへつながるリンクは画面上に表示されません。

しかし、リンク(http://localhost:3000/admin)に直接アクセスすると、画面が表示されてしまします。

この問題を修正しましょう。

TokenのString化

現在のTokenはByte型で返却されてしまっているので、String型に変換します。

Tokenチェック

Tokenをチェックするミドルウェアを実装します。

かなり長いですが、定型文として覚えていただければ幸いです^^;

errorJSONメソッドの修正

statusコードを受け取れるようにerrorJSONメソッドを修正します。

ハンドラーに混ぜる

Tokenのチェック結果をハンドラーに混ぜる処理を実装します。

justinas/aliceパッケージは、handler簡単に繋げることができるパッケージです。これで、Tokenのチェック結果をハンドラー内に混ぜることができるようになりました。

CORSヘッダーの修正

CORSヘッダーに「Authorization」を追加しましょう。

検証1: 変更リクエストを送ってみる

ブラウザから「http://localhost:3000/admin/movie/4」へアクセスしSaveボタンを押下しましょう。
※ログインしていない場合は、ログインしてください。
※「docker-compose up」でコンテナが立ち上がります

「invalid auth header」になりました。理由は以下の2つです。

  • EditMovieコンポーネントにはJWTトークンを渡していない
  • Edit APIへのリクエストにJWTを渡していない

前回、JWTトークンをRedux Storeに保存する処理を実装したので、そこから取り出してリクエストヘッダーに混ぜましょう。

Redux Storeへのコネクト

EditMovieコンポーネントをRedux Storeへ接続します。

これで、「props.jwt」からJWTトークンを取得できます。

Save処理の変更

Saveボタンを押下してAPIへリクエストを飛ばす際、header内にJWTトークンを含めるように修正します。

検証2: JWTトークン付きでリクエストを送ってみる

検証1と同様の方法で、リクエストを送信してみましょう。

今度は大丈夫でしたね^^

リダイレクト処理

さて、前置きが長くなりましたが、いよいよ本題です。

JWTトークンをチェックし、ログインしていない場合は、ログイン画面にリダイレクトする処理を実装します。

EditMovieコンポーネント

useEffectはページが読み込まれたときに実行されるので、ここにJWTトークン判定を実装します。

確認してみましょう。

未ログインの状態から「http://localhost:3000/admin/movie/4」にアクセスします。

成功ですね。

他のコンポーネントにも同様に追加します。

Adminコンポーネント

この状態で「http://localhost:3000/admin」にアクセスすると、下記のエラーが発生します。

「TypeError: Cannot read property ‘push’ of undefined」

そこで、App.tsxのAdmin呼び出しを変更します。

Appの子コンポーネントとしてAdminを登録することで、pushが使えるようになります。

JWTトークンの保存

ログイン後、別のURL「https://selfnote.work/」にアクセスし、また「http://localhost:3000」に戻るとログイン状態が解除されます。

ログイン状態が解除されるのはログアウト処理を実行したときのみにしたいので、修正しましょう。

localStorage

ブラウザにデータを保存する仕組みの一つにlocalStorageがあります。

これを使って、JWTトークンをブラウザ上に記憶させましょう。

まずは保存処理です。これはsetItemメソッドを使えば簡単です。

設定したJWTトークンはブラウザの開発者ツールの「Application」タブから確認可能です。

ログアウト処理の修正

ログアウト時には、localStorageに設定したJWTトークンを削除します。

削除には、removeItemメソッドを使います。

ブラウザからログアウトをするとJWTトークンが削除されていることがわかります。

jwtトークンの設定

localStorageにJWTトークンがあれば、それをRedux Storeに保存する処理を追加します。

このようにしておけば、localStorageにJWTトークンが保存されている限り、ログイン状態を保つことが可能です。

getItemメソッドを使って、localStorageからJWTトークンを取得しましょう。

OKですね。

ホームページのリファクタリング

ホームページのリファクタリングをしてこの記事は完了です。

次回

次回は、GraphQLを実装します

記事まとめ

参考書籍

ソースコード

middleware.go

routes.go

tokens.go

utilities.go

App.tsx

App.tsx

Admin.tsx

EditMovie.tsx

Home.tsx

Home.css

Login.tsx

tokens.ts

コメントを残す