Laravelで投稿アプリの機能を作成 ~ログインカスタマイズ編Ⅰ~

はじめに

【30分クッキング】Laravelで投稿アプリの機能を作成のCRUD編、リレーション編に引き続き、
今回はできる限り工程を取らずに、自分のページに遷移させていく方法を実装いたしましたので
紹介していきたいと思います

#前提
・前回のデータを元に修正していくので、一緒にデータを作りたい方は
下記から見ることをお勧めします
①https://qiita.com/ProgramingDai/items/cf6944f9cd0ac08f4e3e
②https://qiita.com/ProgramingDai/items/249acc8894079ee58268

・今回はできる限り工数を割くため、既存のLoginCotrollerとlogin.blade.phpを利用します

実装イメージ

{root}/post
↓
未認証
↓
{root}/login
↓
認証後
↓
{root}/post
↓
ログアウト
↓
{root}/login

#実装レシピ
1.ログイン後のリダイレクト先変更

/app/Http/Controllers/Auth/LoginController.php

// 中略
// protected $redirectTo = '/home'; // デフォルトリダイレクト先
protected $redirectTo = '/post'; // 変更後リダイレクト先
// 中略

2.ログアウト後のリダイレクト先変更
今回はUserController.phpを新たに作成して実装します

php artisan make:controller UserController

/app/Http/Controllers/UserController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
// 追加
use Illuminate\Support\Facades\Auth;

class UserController extends Controller
{
    // ログアウト遷移先変更
    public function getLogout(Request $request){
        Auth::logout();
        return redirect()->route('login');
    }
}

3.ルーティング設定

/routes/web.php

// 中略
Route::get('/logout', 'UserController@getLogout')->name('user.logout');

4.ビューの修正
デフォルトでの「login.blade.php」の中身を全て変更していきます。

/resources/views/auth/login.blade.php

@extends('layouts.postapp')

@section('content')
@section('maincopy', 'ログインしてください')

<form method="POST" action="{{ route('login') }}">
    {{ csrf_field() }}
    @if ($errors->has('email'))
        {{ $errors->first('email') }}
    @endif
    <input type="text" class="form" name="email" placeholder="メールアドレス">

    @if ($errors->has('password'))
        {{ $errors->first('password') }}
    @endif
    <input type="password" class="form" name="password" placeholder="パスワード">
    <input type="submit" class="create" value="ログイン">
</form>
@endsection

5.新規登録とログアウトリンクの切り分け表示
ログインするためには新規登録画面とログアウトできるリンクが必要です
@if(Auth::check())で現在認証中か否かを判定することができます

このページのどこでもいいので下記コードを追加してください

/resources/views/layouts/postapp.blade.php

@if(Auth::check())
<!--認証中なら-->
<a href="{{ route('user.logout') }}"><img src="{{ asset('img/logout.svg') }}" class="add" alt="ログアウト"></a>
@else
<!--未認証なら-->
<a href="{{route('register')}}"><img src="{{ asset('img/user.svg') }}" class="add" alt="ユーザー登録"></a>
@endif

※imgの部分は通常のリンク文字にしてもOKです
※ボタンUIはこちらのサイトから無料でダウンロードしました
https://www.ikonate.com/

あとがき

こんな感じ自動生成されるをページを利用すれば、遷移を変更していくだけで
オリジナルログイン画面の実装ができます。ログイン周りはこの他にも、「login.blade.php」を使わず
ビュー自体もオリジナルで実装する方法もありますので、興味があれば調べてみてください。
次回はregister（新規登録）周りのカスタマイズを実装していく予定ですので、ぜひ。

Laravelで投稿アプリの機能を作成
~CRUD編~
https://qiita.com/ProgramingDai/items/cf6944f9cd0ac08f4e3e
~リレーション編~
https://qiita.com/ProgramingDai/items/249acc8894079ee58268
~ログインカスタマイズ編Ⅰ~
https://qiita.com/ProgramingDai/items/fee669e5a8cf67f0e38e
~ログインカスタマイズ編Ⅱ~
https://qiita.com/ProgramingDai/items/4fe2e3cc90987356c9c4

参考書籍： PHPフレームワーク Laravel入門
https://blog.hiroyuki90.com/articles/laravel-books/