目次
Laravel でユーザ認証とマルチ認証を実現する
マルチ認証の実現
管理者と教員ページのデザイン変更
システム管理者の権限でログインすることができるようになりました．同じ手順で教員の認証も実装できます．しかしながら，一般ユーザのページと全く同じデザインだと違いが分かりにくいという問題があります．よってここでは管理者のページと教員ページのデザインをスタイルシートを使って変更します．
まずスタイルファイルを設置します．public ディレクトリに css ディレクトリを作成し，adminstyle.css と professorstyle.css を設置します．どちらも適当な色の背景色を設定します．
public/css/adminstyle.css
body {
background-color: deepskyblue;
}
professorstyle.css
body {
background-color: pink;
}
管理者と教員について，ログインページとログイン後のページのレイアウトで今作成したスタイルシートを読み込みます．ただし，レイアウトの中に背景色を設定する項目があるのでこの部分は削除しておきます．
resources/views/layouts/guestadmin.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<link href="{{ asset('/css/adminstyle.css') }}" rel="stylesheet">
</head>
<body class="font-sans text-gray-900 antialiased">
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0"> <!-- bg-gray-100 を削除する -->
<div>
<a href="/">
<x-application-logo class="w-20 h-20 fill-current text-gray-500" />
</a>
</div>
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
{{ $slot }}
</div>
</div>
</body>
</html>
resources/views/layouts/admin.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<link href="{{ asset('/css/adminstyle.css') }}" rel="stylesheet">
</head>
<body class="font-sans antialiased">
<div class="min-h-screen"> <!-- bg-gray-100 を削除する -->
@include('layouts.admin_navigation')
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
</body>
</html>
resources/views/layouts/guestprofessor.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<link href="{{ asset('/css/professorstyle.css') }}" rel="stylesheet"> <!-- bg-gray-100 を削除する -->
</head>
<body class="font-sans text-gray-900 antialiased">
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0">
<div>
<a href="/">
<x-application-logo class="w-20 h-20 fill-current text-gray-500" />
</a>
</div>
<div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
{{ $slot }}
</div>
</div>
</body>
</html>
resources/views/layouts/professor.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<link href="{{ asset('/css/professorstyle.css') }}" rel="stylesheet">
</head>
<body class="font-sans antialiased">
<div class="min-h-screen"> <!-- bg-gray-100 を削除する -->
@include('layouts.professor_navigation')
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
</body>
</html>
システム管理者のページは背景が deepskyblue です．
教員ページの背景は pink です．このように背景色を分けるだけでもどの権限で操作しているのかが視覚的にわかるようになります．
なお，ログアウト後に表示される Welcome ページはダークモードで表示されています．
このページの表示モード（カラースキーム）は OS の設定やブラウザの設定で切り替えることができます．例えば Firefox の設定の「一般」から「ウェブサイトの外観」を「Light」に変更します．
すると Welcome ページがライトモードで表示されました．
