Laravel 6 / 7〜でログイン機能を構築

Laravel 6 /7 〜でログイン機能を実装します。

なおすでにデータベースと接続していることを前提に説明します。

関連ページ

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

$ composer require laravel/ui

1	$ composer require laravel/ui

下記コマンドで、認証機能の構築に必要なビューなどのファイルが生成されます。なおvue（Vue.js）を指定していますが、Reactを利用する場合は「react」と指定します。他にも「bootstrap」が指定できます。

$ php artisan ui vue --auth

1	$ php artisan ui vue --auth

下記のようなメッセージが表示されます。

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

Vue scaffolding installed successfully.

Please run "npm install && npm run dev" to compile your fresh scaffolding.

Authentication scaffolding generated successfully.

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

$ php artisan migrate

1	$ php artisan migrate

以降の説明では、Node.jsがインストールされていることが前提です。

下記コマンドでフロント側に関連したパッケージがインストールします。node_modulesディレクトリが生成されpackage.jsonの内容に依存した様々なパッケージがインストールされます。

$ npm install

1	$ npm install

package.jsonとnpm installについては下記ページをご覧下さい。

Node.js – ExpressでHello world

ビルドを実行します。

$ npm run dev

1	$ npm run dev

以上でログイン機能が実装されたことを確認できます。

上記画面から実際にユーザーを登録し、ログインできる状態（/homeが見られる状態）にしておきます。

画面の追加

次に新しく画面（/book）を追加し、/homeと同じくログインしている状態でのみ表示できるようにします。

BookControllerを作成し、生成されたファイルを下記のように編集します（ハイライト部分）。

$ php artisan make:controller BookController

1	$ php artisan make:controller BookController

app/Http/Controllers/BookController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class BookController extends Controller
{

    public function __construct()
    {
        $this->middleware('auth');
    }

    public function index()
    {
        $user = Auth::user();
        $data = ['user' => $user];

        return view('book.index', $data);
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Auth;

class BookController extends Controller

{

public function __construct()

{

$this->middleware('auth');

}

public function index()

{

$user = Auth::user();

$data = ['user' => $user];

return view('book.index', $data);

}

11〜14行目

コンストラクタでミドルウェアのauthを呼び出し、認証済みのユーザーのみアクセスの許可を与えています。この設定はweb.php側でもおこなえます（後述）。

18行目

Authファサードで認証されたユーザーの情報を取得しています。

web.phpに下記コードを追記します。

routes/web.php

Route::get('/book', 'BookController@index');

1	Route::get('/book', 'BookController@index');

上述したようにBookController.phpにおいてコンストラクタにミドルウェアのauthを設定しましたが、ルート情報側に、下記のように設定することもできます。

Route::get('/book', 'BookController@index')->middleware('auth');

1	Route::get('/book', 'BookController@index')->middleware('auth');

テンプレートを用意します。bookディレクトリを作成し、index.blade.phpを作成・配置します。

resources/views/book/index.blade.php

<p>{{ $user->name }}</p>
<p>{{ $user->email }}</p>

1 2	<p>{{ $user->name }}</p> <p>{{ $user->email }}</p>

以上で、もしログインした状態で/bookにアクセスした場合、ユーザーのNameとE-Mail Addressが表示されるのが確認できます。もしログアウト状態でアクセスした場合は、/login画面へとリダイレクトされます。

参照ページ

Laravel 6.x 認証

Pocket

思考の葉

思考の葉