Laravel SanctumとVue.jsによるSPA認証

2020年5月26日

PHP

Laravel(Framework 7.10.3を利用)のSanctum(以前はAirlockという名前)で「SPA(Single Page Application)認証」としてのAPIを作成し、フロントエンドはVue.jsを利用してログイン・ログアウト機能を実装してみます。

 

ログインフォーム画面(/login)と、ユーザー名とメールアドレスを表示させる画面 (/about)を作成します。

 

 

ログインしていない状態で/aboutにアクセスすると/loginにリダイレクトされ、ログインしている状態で/loginにアクセスすると/aboutへリダイレクトされるように実装しています。このような画面の切り替え自体はフロント側で実装する必要があり、本記事ではLocalStorageとVue Routerの機能を利用しています。

 

なおLaravelおよびVue.jsともにローカル環境(localhost)にて構築しています。

 

 

プロジェクト作成


 

 

MySQLでsample01という名前のデータベースを用意しました。

.env

 

次にlaravel/uiパッケージをインストールします。

 

Vue.jsで認証機能の構築に必要なビューなどのファイルが生成されます。

 

package.jsonの内容に依存したパッケージおよびvue-routerをインストールします。

 

コンパイルを自動化します。

 

マイグレーションを実行します。

 

サーバーを起動させます。

 

tinkerでユーザーデータを登録しておきます。※この時点ではまだブラウザからも普通にユーザー登録ができます。

 

 

Sanctumのインストール/設定


 

Sanctumをインストールします。

 

SPAの認証として利用できるように、Kernel.phpファイルのapiミドルウェアにSanctumのミドルウェアを追記します。これでAPIに対するリクエストでセッション・クッキーによる自動認証が可能となります。

app/Http/Kernel.php

 

 

APIとSPAの構築


 

本記事ではSanctum以外は基本的に手順のみ記述しています。Vue.jsやSPA自体の説明は下記ページもご覧下さい。

 

Laravel 6.x〜 Vue.jsを利用する [axios][Laravel Mix]

 

Laravel Vue.jsのVue RouterでSPA構築

 

 

まずはLaravelにおいてAPI用のコントローラーを作成します。

 

下記のように編集します。

app/Http/Controllers/LoginController.php

 

api.phpを下記のように編集します。

routes/api.php

6〜8行目 auth:apiをauth:sanctumに変更します。これで認証済の場合にのみリクエストを受け付けるようになります。user()によって認証ユーザーのデータを取得しています。本記事ではabout画面で実際に利用しています。

 

以上で設定されているルート情報を確認してみます。

 

 

SPAの土台としてのビュー(テンプレート)を作成します。index.blade.phpをを作成し下記のように記述します。

resources/views/index.blade.php

 

web.phpを下記のように編集します。

routes/web.php

 

resources/js/app.jsを下記のように編集します。

 

router.jsファイルをresources/jsディレクトリ以下に作成し、下記のように編集します。

resources/js/router.js

はじめに記述したように、本記事の実装では認証の有無情報はLocalStorageに保存しています。ログイン時にLocalStorageに適当なキー(と値)を用意し、またログアウト時にそのキーを破棄しています(コンポーネントの作成で説明)。そのキーの有無(27行目のisLoggedIn())とVue Routerのルートメタフィールド機能を利用して画面の切り替えをおこなっています。

 

 

webpack.mix.jsに下記コードを追記します。

webpack.mix.js

 

 

最後にVue.jsにおける各画面、loginおよびaboutコンポーネントを作成します。

 

resources/js/components/login.vue

36行目

ログイン処理の前にCSRF保護を設定しています。ログインのリクエストが成功するとセッション/クッキーによって自動認証されるようになります。

 

44行目

認証に成功した場合、LocalStorageに適当なキー(と値)を保存します。

 

 

resources/js/components/about.vue

27行目

ログイン時に保存していたLocalStorageを破棄しています。

 

 

参照ページ


 

Laravel 7.x Laravel Sanctum

 

Vue Router

ルートメタフィールド

 

YouTube QiroLab

SPA Authentication using Laravel Sanctum (formerly Laravel Airlock)

 

 

LINEで送る
Pocket

定番本
定期本
 
Copyright © 2020 思考の葉 All Rights Reserved.  プライバシーポリシー