[Laravel5.5でREST API + SPA] API認証を実装する (JWTAuth) フロントエンド編

バックエンド側の認証制御は実装できたので
次はフロントエンドにログイン機能を実装していきます。

vuexを入れてユーザ情報を一元管理する

vuexとは、vue-routerと同じくVue.jsのオプションパッケージで
SPAアプリケーション全体で保持する状態やデータを管理するライブラリです。
たとえば全コンポーネントから参照されるログイン中のユーザ情報などを扱うのに適しています。

 

npmでインストールします。

 

resources/assets/js/store/ディレクトリを作り、以下の3ファイルを作成します。

index.js内の「state」が保持するデータ、「getters」がその名の通りデータのgetterです。
「actions」が各コンポーネントから呼び出されるメソッドになりますが、
「mutations」だけがstateを変更できるという構造になっています。
こうすることで、stateデータは必ずこの処理を通して扱われる = 一元管理されることとなります。
これをStoreパターンと呼びます。

今回は認証処理とそこで取得されるログインユーザ情報をStoreで管理する形になります。
ログインアクションが成功したらユーザ情報をミューテーションでstateに記憶し、
ログアウトしたらその逆、といった実装になっています。

 

ログイン画面 / ログアウト処理

vuexで作成したstoreを使ってログインアクションをdispatchします。
ログインに成功したら/users/にリダイレクト。

 

こちらはログアウト処理。
コンポーネントにする必要はないのですが、
わかりやすいので空のコンポーネントにログアウト処理を書いて
最後にログイン画面にリダイレクトしています。

 

ルーティング

/loginと/logoutをルーティングに追加。
router.beforeEachは新しいルートに遷移したすべてのタイミングで走る処理を登録する関数です。
ここで、storeにログインユーザ情報があるか確認し、なければ/meに問い合わせて
トークンが生きているか(ログイン中か)を画面遷移の度に確認します。
どの画面を要認証とするかは、routes設定のmeta.requiredAuthで指定します。

 

リクエストヘッダーにJWTトークンを付与

APIへのリクエストを一括管理しているhttpサービスを上記のように変更します。
レスポンスにjwtトークンが含まれていればローカルストレージに保存し、
リクエスト時にそのトークンを自動付与してAPIをコールする仕組みです。

 

 

これでフロントからログインしてAPIを利用できるようになりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連する投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る