Vue.js + Laravel8でVue側にログアウトボタン(処理)をつけたい
【開発環境】
Windows 10 HOME
PHP 7.4.7
laravel/framework: ^8.2,
laravel/tinker: ^2.5,
laravel/ui: 2
vue": "^2.5.17",
vue-router": "^3.5.1"
解決したいこと
Vue.js + Laravelの勉強で下記の記事を見て
ローカルで開発しています。
Vue.js + LaravelでシンプルなSPA構築チュートリアル：概要編
これにログイン機能をつけているのですが、
ログイン後のタスク一覧のヘッダー部分に
「ログアウト」のボタンつけてログアウト処理をしたいのですがわかりません。
LOGIN機能は下記のコマンドでインストールしました。
php artisan ui vue --auth
ヘッダー部分はVue.jsで実装しており
ここに「ログアウト」ボタンをつけようかと考えてます。
resources\js\components\HeaderComponent.vue
<template>
<div class="container-fluid bg-dark mb-3">
<div class="container">
<nav class="navbar navbar-dark">
<span class="navbar-brand mb-0 h1">Vue Laravel SPA</span>
<div>
・・・
<router-link >
<button class="btn btn-success">logout</button>
</router-link>
</div>
</nav>
</div>
</div>
</template>
コマンドで作成したPHP部分を
Vue.jsに何とか移植できないかとか
やってみたんですが無理そうです。
出来れば簡単に
ログアウト処理をつける方法はないでしょうか？
resources\views\layouts\app.blade.php
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
@csrf
</form>
何か心当たりがある方、
解決方法を教えて下さい。
0