Laravel+Sanctum+FortifyとNuxt.js+nuxt/authでSPAの認証処理を実装する【ページプロテクト編】

前回まででユーザー情報を編集する処理が実装できたので、今回はその情報を使ってページをプロテクトする処理を実装していきます。

ページプロテクト処理の実装

ログインの強制

nuxt.config.jsに以下のようにコードを追加するだけで、全てのページでログインが必要になります。

ですがこれだとユーザー登録用のページなどログイン不要のページなどもプロテクトされてしまいます。ログインが不要なページコンポーネントには次の様に「auth: false」を設定します。

メール認証の強制(クライアント側)

さらにメールが認証されていない場合も対応してみます。まずはメール認証されていない場合のリダイレクト先のページを用意します。pagesフォルダにverify.vueという名前でファイルを作成し、メッセージを表示しているだけです。

次にmiddewareフォルダ内にverified.jsという名前でファイルを作成し以下の様に編集します。

2行目: verify以外のページにアクセスした時は処理除外。やらないとずっとループしてしまう。

3行目:ログイン中の場合。

4行目:ログイン中でemail_verified_atがnullの場合。

5行目:verifyページへリダイレクトさせる。

最後にnuxt.config.jsのmiddleware配列に今しがた作成したverified.jsミドルウェアを追加します。

これでメールが認証されていない時にはverifyページへリダイレクトされるようになりました。

メール認証の強制(サーバー側)

LaravelのAPI側もメール認証されていないルートをプロテクトしておきます。app\Http\Kernel.phpでそれ用のミドルウェア(verified)が定義されているのでそのまま使います。

routes/api.phpファイルを次の様に編集します。’auth:sanctum’と’verified’のミドルウェアグループを用意し、api/userルートのみverifiedミドルウェアを除外しています。何かAPIを追加するときは26-28行目の/hogeのような感じに追加します。

メール認証の再送処理

ついでに認証用のメール再送処理もpages/verify.vueへ実装します。email/verification-notificationへpostするだけです。

config\cors.phpのpathsに’email/verification-notification’の追加もしておきます。

最後に

非常に簡単にページをプロテクトすることが出来ました。次回はパスワードのリセット回りを実装してみようと思います。

コメントを残す

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