前回は、Laravel が提供する認証関連の機能をセットアップしました。今回はその内容を確認しつつ、若干の修正を加えます。
レイアウトの差し替え
現在、自分で作成したレイアウトファイルと artisan make:auth で生成されたレイアウトが両方使われています。認証関連のビューで使っているレイアウトを自分が作成したレイアウトに変更します。
resources/views/ ├── layout.blade.php 自分で作成したもの └── layouts └── app.blade.php artisan make:auth で生成されたもの
resouces/views/auth 以下の全てのビューと resouces/view/home.blade.php でレイアウトの指定を変更します。
{{-- @extends('layouts.app') --}}
@extends('layout')
...
Route の修正
artisan make:auth で HomeController.php が追加されたことで、named route で “home” を指定している箇所が重複しています。ホームと読んでいる箇所が２箇所あってややこしい状態です。
これを修正します。
// routes/web.php
// ->name('home') としている箇所が２つある。
Route::get('/', 'ArticlesController@index')->name('home');
Route::get('/home', 'HomeController@index')->name('home');
このチュートリアルでは ‘/’ の named route を ‘home’ とします。
つまりホームといえば記事一覧です。
ログイン後に表示される画面はダッシュボードと命名することにします。
roeuts/web.php を以下のように修正します。
// routes/web.php
Route::get('/', 'ArticlesController@index')->name('home');
// Route::get('/home', 'HomeController@index')->name('home');
Route::get('/dashboard', 'DashboardController@index')->name('dashboard');
Controller の修正
Route の修正に伴い、Controller も修正していきます。
HomeController.php の修正
HomeController.php を DashboardController.php にファイル名を変更します。
内容も以下のように修正します。
<?php
// app/Http/Controllers/DashboardController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
// class HomeController extends Controller
class DashboardController extends Controller // ①
{
public function __construct()
{
$this->middleware('auth');
}
public function index()
{
// return view('home');
return view('dashboard'); // ②
}
}
① Class 名を変更
② 呼び出す view 名を変更
それに伴い、home.blade.php を dashbord.blade.php にファイル名を変更します。
認証関連コントローラのリダイレクト先を修正
ユーザー登録後、ログイン後、パスワード再設定後に表示する（リダイレクトする）パスを変更します。
以下のファイルを全て修正します。
- RegisterController.php
- LoginController.php
- ResetPasswordController.php
// protected $redirectTo = '/home';
// named route で指定したいので function にします
protected function redirectTo ()
{
return route('dashboard');
}
Navbar の修正
Navbar に認証関連ページへのリンクを追加します。また、ログイン状態に応じて表示するメニューを変更します。
{{-- resouces/views/navbar.blade.php --}}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
...
<!-- メニュー -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- 左寄せメニュー -->
...
<!-- 右寄せメニュー -->
<ul class="navbar-nav">
{{-- ① --}}
@guest
<!-- ログインしていない時のメニュー -->
<li class="nav-item">
{{-- ② --}}
<a class="nav-link" href="{{ route('login') }}">Login</a>
</li>
<li class="nav-item">
{{-- ③ --}}
<a class="nav-link" href="{{ route('register') }}">Register</a>
</li>
@else
<!-- ログインしている時のメニュー -->
<li class="nav-item">
{{-- ④ --}}
<a class="nav-link" href="{{ route('dashboard') }}">Dashboard</a>
</li>
<!-- ドロップダウンメニュー -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{-- ⑤ --}}
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
{{-- ⑥ --}}
<a class="dropdown-item" href="#"
onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
>
Logout
</a>
{{-- ⑦ --}}
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>
主に右寄せメニューの部分を修正しています。
① @guest を使って、ゲスト（ログインしていない）の時とログインしている時でメニューの表示を分けています。
② リンク先にログインページヘのルートを指定。
③ リンク先にユーザー登録ページヘのルートを指定。
④ リンク先にダッシュボードヘのルートを指定。
⑤ ログインユーザーの名前を表示。
⑥ クリックされた時に⑦の logout-form を submit するように javascript で記述しています。
⑦ logout ルートへ POST リクエストを送るフォームです。⑥がクリックされた時に送信され、ログアウト処理が実行されます。
ここでは Formヘルパーを使わず、<form> タグを直接記述しているため、CSRF対策のトークンを自分で埋め込む必要があります。そのため、@csrf を記述しています。これが CSRF対策のトークンに置き換えられます。ブラウザで HTML のソースコードを表示してどのように変換されたかを確認してみてください。
動作確認
ここまでで修正は完了です。一連の動作を一通り確認してみてください。
- ユーザー登録
- ログイン
- ログアウト
- パスワード再設定
