⑩Vue.js & Laravel（認証機能の追加）

2023-02-212024-04-01

はじめに

こちらは10本の記事で構成されています

目標

認証機能を実装する

実装

①ログインしていないユーザーをブロックする

<?php

use Illuminate\Support\Facades\Route;

Auth::routes();

+ Route::get('/login', 'Auth\LoginController@showLoginForm')->name('login');
+ Route::post('/login', 'Auth\LoginController@login');
+ Route::get('/logout', 'Auth\LoginController@logout')->name('logout');
+ Route::post('/logout', 'Auth\LoginController@logout', 'logout');
+ Route::group(['middleware' => 'auth:web'], function () {
     Route::get('/', function () {
         return view('app');
     });
+ });

これで「①ログインしていないユーザーをブロックする」が達成されました

②APIでユーザー情報を取得し表示する

<template>
    <div class="taskComponent">
+        私の名前は<span>{{user.name}}</span><br>
+        メールアドレスは<span>{{user.email}}</span>
+        <br>
+        <br>
+        <a href="/logout">ログアウト</a>
    </div>
</template>

<script>
export default {
    data() {
        return {
+            user:{}
        };
    },
    methods: {
+        getLoginUser() {
+            axios.get("/api/loginuser").then((res) => {
+                this.user = res.data;
+            });
+        },
    },
    mounted() {
+        this.getLoginUser()
    },
};
</script>
<style lang="scss" scoped>
+ span{
+    color: red;
+ }
</style>

<?php

use Illuminate\Support\Facades\Route;

Auth::routes();

Route::get('/login', 'Auth\LoginController@showLoginForm')->name('login');
Route::post('/login', 'Auth\LoginController@login');
Route::get('/logout', 'Auth\LoginController@logout')->name('logout');
Route::post('/logout', 'Auth\LoginController@logout', 'logout');
Route::group(['middleware' => 'auth:web'], function () {
     Route::get('/', function () {
         return view('app');
     });
});

+ Route::middleware('auth')->get('api/loginuser', 'UserController@loginuser');

$ php artisan make:controller UserController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
+ use App\User;
+ use Auth;

class UserController extends Controller
{
+    public function loginuser()
+    {
+        $loginuser = Auth::user();
+        return $loginuser;
+    }
}

これで「②APIでユーザー情報を取得し表示する」が達成されました

独学に限界を感じたら、プログラミング教室がお勧めです。