【laravel】Authの導入方法について

本日はAuthを使って、ユーザ認証機能を実装しようと思います。

Railsのdeviseのようなもので、導入は非常に簡単です。

データベースの準備
アプリケーション名の変更
viewを修正
ログインしている時だけアクセスできるようにする
あとがき

データベースの準備

まずは、Auth関連のファイルとデータベースをそれぞれ準備します。

$ php artisan make:auth

これでマイグレーションファイルが作成されるので、そのままマイグレーションを実行して、テーブルを作成します。

$ php artisan migrate

これで終わりですw

「http://localhost:8000/register」にアクセスすれば、アカウント登録できます。

また、アカウント登録したらそのままログイン状態となって「http://localhost:8000/home」に遷移します。ユーザのマイページのようなものです。

認証関係は独自でページを作成して運用することも考えましたが、今回はAuthがお膳立てしてくれたものを積極的に活用していきます。

アプリケーション名の変更

Authで作成されたページはタイトル等が「laravel」になっているので、これを「eravel」に変更します。

アプリケーションの名前は.envで定義しているのでここを変更します。

.env

APP_NAME=Eravel
#省略

.envの変更はserverを再起動することで反映されます。

次にwelcomeページ、homeページ、indexページをそれぞれ修正します。

各ページの役割は以下の通り。

welcomeページ：最初のページ。ログインしていなくても表示。
homeページ：ユーザの個人ページ。ログインしていないと遷移できない。
indexページ：カリキュラムと理解度テスト一覧を表示するページ。ログインしていないと遷移できない。

各ページの関連性は以下の通り。

http://localhost:8000にアクセスするとwelcomeページを表示
アカウント登録するとhomeページに遷移
homeページからリンクでindexページに遷移

では、実際にコードを直していきましょう。

viewを修正

まずはresources/views/welcome.blade.phpから修正します。

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        #省略
        <title>Eravel</title> #タイトルを変更
        #省略
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                        <a href="{{ url('/index') }}">INDEX</a>　#INDEXへのリンクを追加
                    @else
                        <a href="{{ route('login') }}">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    Eravel　#タイトルを変更
                </div>

            </div>
        </div>
    </body>
</html>

修正はタイトルの変更と、indexページへのリンク追加です。

次はresources/views/home.blade.phpです。

@extends('layouts.app')

@section('content')
                #省略
                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!

                    <ul>
                        <li><a href="{{ url('/') }}">Eravel</a></li> #リンクを追加
                        <li><a href="{{ url('/index') }}">INDEX</a></li> #リンクを追加
                    </ul>
                </div>
                #省略
@endsection

修正はwelcomeページとindexページへのリンク追加です。この記述だと見た目は悪いですが、今は気にしません。ある程度基本機能が出来上がってから、直していきます。

最後はresources/views/curriculum/index.blade.phpです。

index.blade.php

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Eravel</title>
    </head>
    <body>
        <header class="header">
        <ul>
            <li><a href="{{ url('/') }}">Eravel</a></li>
            <li><a href="{{ url('/home') }}">HOME</a></li>
        </ul>
        </header>
        <p>hello Eravel</p>
        @foreach ($items as $item)
            <p>{{$item->name}}</p>
        @endforeach
    </body>
</html>

修正はタイトルの変更と、welcomeページ・indexページへのリンク追加です。

ログインしている時だけアクセスできるようにする

Authで作成されたhomeはデフォルトでログインした時しかアクセスできないようになっています。

indexも同じ設定にするためにroutes/web.phpを修正します。

web.php

<?php

#省略

Route::get('index', 'CurriculumController@index')->middleware('auth');
Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

middleware('auth')を追加することで、ログインしていない状態でindexページにアクセスしようとするとログインページにリダイレクトするようになります。

おつかれさまでした。これでAuthの導入方法についての説明を終わります。次回は実際のカリキュラムページを実装していこうと思います。