また、Laravelの拡張機能を用いて、ほとんどコーディングを行わずにログイン機能を作成します。
事前準備
Node Package Managerの略称で、Node.jsのパッケージ(便利機能)を管理するためのものになっています。
詳細は省きますので、興味がある方は「Node.js」についても調べてみてください。
Laravelのログイン機能を実装
それではログイン機能の実装に入ります。
基本的にはコマンドの実行でほとんど終了してしまうので、コーディングは不要です。
パッケージの(laravel/ui)インストール
コマンドを実行して、インストールを行っていきます。
composer require laravel/ui:^1.0
ログイン画面の作成
パッケージがインストールできると、php artisanコマンドでuiのメソッドが呼び出せるようになります。
Vueを用いたログイン機能作成のメソッドを呼び出していきます。
php artisan ui vue --auth
migrateの実行
migrateコマンドを実行して、必要なテーブルを作成します。
php artisan migrate
記述内容を確認してみましょう。
npm install
npm run dev
※本番環境の場合は「npm run dev」ではなく、「npm run production」となります。
コマンドが実行できたら、システムを起動してみましょう。
ログイン機能の確認
システムを起動してトップページを開くと、右上に「LOGIN」と「REGISTER」のリンクがあるかと思います。
コチラをクリックすることで、ログイン機能を表示することが可能です。

ログインページ
「LOGIN」をクリックするとログインページが表示されます。
シンプルなデザインですが、このまま使っても差し支えない程度には整ったデザインになっていますね。
今はユーザが登録されていないのでログインができません。ユーザを登録した後にログイン機能を確認しましょう。

ユーザ登録
「REGISTER」をクリックすると、ユーザ登録ページが表示されます。
機能のコーディングはしていませんが、この登録機能もすでに使える状態になっています。
適当に入力して登録後、DBの中身をのぞいてみてください。
入力した内容を一定ルールで変換して登録します。データ流出などの際にパスワードが知られないようにするための工夫です。
ログインの際は登録時に入力した内容で問題ありません。
つまり、パスワードを忘れてしまうとDBを直接見ても分からないので注意しましょう。
お好みでソフトをご用意ください。私は「A5 Mk2」を使用しています。
ログアウト
ログイン機能を確認するために、一度ログアウトしましょう。ログアウト機能もすでに実装されている状態になっています。
右上のユーザ名をクリックして「Logout」からログアウトを行うことが出来ます。

ログイン
それではログインページログインをしてみましょう。
先ほど登録した、メールアドレスとパスワードを使用してログインが行えます。
コチラはログイン機能のカスタマイズを行うことで可能となっています。

最後に
今回はここまでとなります。
ログイン機能はシステムの中でも軽い機能として見積もられるのですが、実際に作るのは結構めんどくさかったりします。
「ログインがあるなら、ログアウトが必要」「ログイン者の情報を別の画面で使用したい」といったように、付随してくる機能があるので、考えることが増えがちになってしまいます。
そんなログイン機能をノーコードでここまで実装できるので、「Laravel ui」とても素晴らしいものだと思います。
今回はこのまま使用していきますが、カスタマイズも可能なので必要に応じてカスタマイズを行ってください。