Laravel Sanctum(旧Airlock)で、Nuxt(TypeScript)と接続する手順メモ


docker-composeの構成はこちらの記事通り

localhost:8080がuiコンテナ(Nuxt)

localhost:8000がapiコンテナ(Laravel)

Laravel Sanctumのインストール

apiコンテナに入る。

ComposerでLaravel Sanctumをインストール

 

Artisanコマンドを使用してマイグレーションとコンフィグファイルを作成。

 

app/Http/Kernel.phpファイル中のapiミドルウェアグループへ、Sanctumのミドルウェアを追加。

 

マイグレーションを実施し、 アクセストークンを保存するpersonal_access_tokensと、usersテーブルを作成する。

 

UserモデルでHasApiTokensトレイトを使うように編集する。

HasApiTokensトレイトは、APIトークン/パーソナルアクセストークンをユーザーに発行する。

 

ユーザー取得のためのapiルートを、 auth:sanctum Middlewareを通るように変更しておく。

■api/routes/api.php

 

Laravel側で、ユーザーを追加する。

Laravelのログイン認証機能を使用するため、laravel/uiパッケージをインストール

以下コマンドで、ユーザ登録やログインの画面機能を追加する

localhost:8000の右上REGISTERからユーザーを一人登録する。(★登録したら、今後登録機能は外部から入れないようにしておくこと。)

Nuxt.jsの準備

vueファイルをtypescriptでもimportできるようにsfc.d.tsをtsconfig.jsonと同じディレクトリに置きます。(たいていroot直下)

 

Nuxt.js側でaxiosとnuxtjs/authを導入する

※事前に store/index.js という名前で空のファイルを作成しておく(Auth Moduleはvuex storeを使用するため)

yarnで@nuxtjs/axios @nuxtjs/authをインストール

nuxtjs/authの型ファイルもインストール

nuxt.config.jsに以下を追加

 

各画面で認証状態を確認するMiddlewareを作成しておく。

■ui/middleware/auth.js

 

■plugins/axios.tsを作成しておく。

参考)Nuxt.jsでaxiosの共通処理を作成し、API呼び出し処理をラップして使用する – Qiita

 

■ログイン後の、リダイレクト先のページを作っておく。

ui/pages/dashboard.vue

 

 

Nuxt.js側で、ログインフォームを作成する。

■/pages/index.vue

コレで、ログインしようとすると以下のエラーが・・。

CORSですね・・。

今回は Nuxtが8080 番ポートで動いていて、8000 番ポートで動いている API を呼ぶので発生しています。

対応していきましょう!

Laravel側でCORSの設定

api/config/cors.phpを編集する。

 

セッションクッキードメイン設定をする。

api/config/session.phpを確認。

 

.envのSESSION_DOMAINを見ているので、追加する(開発環境のため、localhostを指定)

 

sanctumがNuxtのドメインを認識できるよう設定する。

api/config/sanctum.phpを確認

,envにSANCTUM_STATEFUL_DOMAINSを追加

apiコンテナ内で以下のコマンドを実行してconfのキャッシュをクリアする(これをしないと、configの値が更新されない場合が多い)

 

確認

ログイン画面にてログインが成功すると、nuxt.config.jsのauth.redirect.homeに設定した、/dashboardページに飛びます。

※loginが成功しているのに302(リダイレクト)になってしまう場合はページ最後の対応を確認。

 

 

ログアウト機能作成

bashboardにログアウト機能を作成していきます。

■ui/pages/dashboard.vue

auth.logout()でログアウトしています。

ログアウト完了したら、自動でログイン画面に戻ることを確認。

 

ユーザー取得機能作成(authではなく通常のaxiosにて。)

nuxt/authではない、通常のaxiosでアクセスできることを確認します。

ダッシュボードにつくっていきます。

■ui/pages/dashboard.vue

■ui/repositories/UserRepository.ts

axiosの処理をRepositoryパターンで、共通化しています。

参考)【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) – Qiita

ユーザー情報取得ボタンをクリックして動作確認をします。

OK

これでようやく、開発を始められる!!

 

ログイン時or未ログイン時のレスポンス修正

Laravelをapiとして利用していると、以下の2パターンで、302(リダイレクト)してしまうことがあります。

①未ログイン時orログアウトした後にaxiosリクエストを投げた時

②ログイン時のloginメソッド

 

例①未ログイン時のaxiosリクエスト(loginページにリダイレクトしてしまう)

 

例②login時(homeページにリダイレクトしてしまう。)

 

そんなときは、axiosを投げるときのリクエストヘッダに以下を指定すると401が返ってくるようになる。

 

 

プロジェクトの関係で、Laravel側に手を加えなければ行けない場合は、Auth::routes(); のログインルートを上書する手もあります(loginメソッドの変更)

■api/routes/web.php

上記のように、Auth::routes();の下に書いてloginルートを上書きします。

※app/Http/Controllers/Auth/LoginController.phpで、AuthenticatesUsersトレイトのloginメソッドをオーバーライドしてもいけるかと思ったのですが、なぜか通らず。。だれかやり方知っている方いたらご教授ください。

 

ログイン時のaxiosリクエストのリダイレクト先を変更したい場合は、api/app/Http/Kernel.phpのpaiグループに登録した、EnsureFrontendRequestsAreStatefulを差し替える必要があるので、省略します。

 

 

 

 

———————————

この記事がお役に立てたら、是非シェアをお願いします^^