第6回目の今回は、ログインが必要となる認証ページとしてログインユーザーのマイページを作成してみたいと思います。このページでは、ログイン認証が必要になるという点と、ログインしているユーザーの情報を取得してページ上に展開していくという2つの機能が必要となります。その点を踏まえて順に実装方法をまとめてみたいと思います。   この記事では、ログイン用のテストユーザーが作成されており、基本的なアプリケーションの環境構築が出来上がっている前提で進めていきます。これまでの内容については過去記事等をご参考ください。 （これまでの内容はこちらの記事から） Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃1：Docker環境構築 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃2：Laravelのインストール Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃3：静的ページの作成とルーティング Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃4：ログイン認証ユーザー作成 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃5：ログイン認証機能の実装    

1. 認証が必要となるユーザーマイページのViewファイル作成

これまでと同じように、今回も必要となるユーザーマイページ用のViewファイルを作成していきます。下記のように「resources/views」ディレクトリ内に新たなディレクトリを作成して、Bladeファイルを配置します。

$ mkdir resources/views/admin
$ touch resources/views/admin/index.blade.php

  作成後はこのようなファイル構成となりました、ここからControllerなどの処理を追加していきます。

resources
  ┣ views
    ┣ admin
      ┗ index.blade.php

  このBladeファイルにマイページの内容が入りますが、また後ほど作成していきます。    

2. ユーザーマイページ用のControllerを作成

Viewファイルが準備できたら、Controllerも作成していきます。これまで同様にコマンドで作成することで簡単に雛形が出来上がります。

$ docker-compose exec app php laravel/artisan make:controller AdminController

  作成したControllerファイルで、マイページのViewファイルを出力する処理を作成していきます。この時、マイページ内でログイン済みのユーザー情報を表示させるため、「Auth::user()」でログイン中のユーザー情報を取得し、Viewファイル内に値として受け渡しておきます。 【app/Http/Controllers/AdminController.php】

<?php

namespace App\Http\Controllers;

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

class AdminController extends Controller
{
  public function index() {
    $admin_user = Auth::user();
    return view('admin.index')->with([
      'admin_user' => $admin_user
    ]);
  }
}

  合わせてルーティングの設定も行います、マイページについてはログイン認証が必要となるページとなるので、これまでのルーティング設定に加えて変更が必要となりますが、一旦認証なしで設定した形で進んでいきます。こちらについては後ほど詳しくみていきます。 【routes/web.php】※一部抜粋

<?php

use Illuminate\Support\Facades\Route;

.......
// admin user mypage
Route::get('/admin', 'AdminController@index')->name('admin');

  これでとりあえずマイページが表示されるようになりましたが、認証ページではないので、ログインしていない状態でアクセスしてもエラーが出てしまいます。ですので、後から認証ページのルーティングを追加していきます。    

3. ユーザーマイページ用のページテンプレート作成

先にマイページで表示させるコンテンツを作成するページテンプレートを用意していきます。Viewファイルへログイン済みユーザーの情報を受け渡しているため、Bladeファイル内で下記のように変数を使って参照できるようになっています。 【resources/views/admin/index.blade.php】※一部抜粋

.......
@section('content')
  <main>
    <h1>マイページ</h1>
    <pre>{{ $admin_user }}</pre>
  </main>
@endsection
.......

  実際にログインした状態でページを表示させると、下記のようにユーザー情報が出力されているのが確認できます。このユーザー情報はシーダーファイルで作成したユーザーの内容が反映されているのがわかります（過去記事：Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃4：ログイン認証ユーザー作成）

<pre>
  {
    "id":1,
    "email":"test@example.com",
    "name":"\u30b5\u30f3\u30d7\u30eb\u30e6\u30fc\u30b6\u30fc",
    "created_at":"2023-01-08T13:56:08.000000Z",
    "updated_at":"2023-01-08T13:56:08.000000Z",
    "deleted_at":null
  }
</pre>

  とりあえず今回はこのデータを表組みで展開してみます。「$admin_user」の変数に連想配列として格納されているのでそれぞれキーを指定して表示させます。Laravelでは日付のフォーマットに「format()」が使えるので便利ですね。

.......
@section('content')
  <main>
    <h1>マイページ</h1>
    <table>
      <tbody>
        <tr>
          <th>ID</th>
          <td>{{ $admin_user['id'] }}</td>
        </tr>
        <tr>
          <th>メールアドレス</th>
          <td>{{ $admin_user['email'] }}</td>
         </tr>
         <tr>
           <th>ユーザー名</th>
           <td>{{ $admin_user['name'] }}</td>
         </tr>
         <tr>
           <th>登録日</th>
           <td>{{ $admin_user['created_at']->format('Y年m月d日') }}</td>
         </tr>
         <tr>
           <th>最終更新日</th>
           <td>{{ $admin_user['updated_at']->format('Y年m月d日') }}</td>
         </tr>
       </tbody>
    </table>
  </main>
@endsection
.......

  表示されるHTMLでは下記のようにユーザー情報が表示されます。

<table>
  <tbody>
    <tr>
      <th>ID</th>
      <td>1</td>
    </tr>
    <tr>
      <th>メールアドレス</th>
      <td>test@example.com</td>
    </tr>
    <tr>
      <th>ユーザー名</th>
      <td> サンプルユーザー</td>
    </tr>
    <tr>
      <th>登録日</th>
      <td>2023年01月08日</td>
    </tr>
    <tr>
      <th>最終更新日</th>
      <td>2023年01月08日</td>
    </tr>
  </tbody>
</table>

   

4. Middlewareの設定

現状ではログインしなくても直接マイページにアクセスできてしまい、未ログインの場合にはエラーが表示されてしまうという状態です。そのため、アクセスした時に、ログインしているかどうかをチェックして、ログインしている場合のみマイページを表示させるようにする必要があります。もしログインしていない場合には、ログイン画面へリダイレクトするなどの処理を行います。そのためには「Middleware」というものを使います。   MiddlewareはHTTPリクエストを受け取った際に、何か処理を実行されるまでに別の処理を行うなどの場合に使われます。今回はHTTPリクエストに対してページ遷移が行われる前にログイン済みかどうかの検証を行う処理をMiddlewareで用意していく形になります。   Middlewareで行われる処理はMiddlewareファイルに定義します。Middlewareファイルも専用のコマンドが用意されているため、簡単に雛形ができるようになります。

$ docker-compose exec app php laravel/artisan make:middleware AdminAuth

  作成されたMiddlewareに対して、認証が失敗したときにログインページにリダイレクトされる処理を記述していきます。 【app/Http/Middleware/AdminAuth.php】

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class AdminAuth
{
  public function handle(Request $request, Closure $next)
  {
    if (!auth()->check()) {
      return redirect('signin');
    }
    return $next($request);
  }
}

  新規作成したMiddlewareはそのままでは使えないため、カーネルに登録する必要があります。下記のように「$routeMiddleware」に追加で作成したMiddlewareのクラスを追加します。 【app/Http/Kernel.php】※一部抜粋

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
  protected $routeMiddleware = [
  .....
  'admin_auth' => \App\Http\Middleware\AdminAuth::class
  ];
}

   

5. ユーザーマイページへログイン認証のルーティング設定

最後に先ほど仮で定義していたマイページへのルーティングを、認証に対応したものへ変更していきます。下記のように先ほど作成したMiddlewareを追記し、その中でルーティングを定義しておくことで、これらのルーティングにはログイン認証が必要とするように変更できます。この際には「group()」でルーティングを設定しておくことで、認証が必要となるページをまとめることができるので便利です。 【routes/web.php】※一部抜粋

// 変更前
Route::get('/admin', 'AdminController@index')->name('admin');
↓
// 変更後
Route::middleware(['admin_auth'])->group(function () {
  // admin user mypage
  Route::get('/admin', 'AdminController@index')->name('admin');
});

  これでログインした状態ではマイページが表示され、ログインしていない場合にはログイン画面へリダイレクトされる形になり、認証ページとしての機能が出来上がりました。  

---

  前回作成したログイン機能の実装に続いて、今回はマイページという認証が必要なページ作成についてまとめてみました。一般的なアプリケーションでは、システムのダッシュボードやユーザーアカウントページなど、認証ページはいろんな画面が必要とされます。Middlewareの使い方を含め、基本的な作成方法として押さえておきたい内容ですね。   （これまでの内容はこちらの記事から） Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃1：Docker環境構築 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃2：Laravelのインストール Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃3：静的ページの作成とルーティング Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃4：ログイン認証ユーザー作成 Docker＋Laravelでバックエンドの開発環境構築とウェブアプリケーション制作＃5：ログイン認証機能の実装