Laravel内に設置型のVue.js component内からLaravelのAuth::routesを使う方法
* vue component内にはlaravel blade template が使えないので {{ route('logout') }} 等の便利なディレクティブが使えない。
通常の {{ route('logout') }} で発行されるHTMLを見てみると…
<li>
<a href="http://YOUR HOME PAGE/logout" onclick="event.preventDefault();
document.getElementById('logout-form').submit();"><i class="fa fa-sign-out"></i>
Logout
</a>
<form id="logout-form" action="http://YOUR HOME PAGE/logout" method="POST" style="display: none;"><input type="hidden" name="_token" value="WrMYReqTjHiHSoVBbIjxdnvCVhj0y70FvQ4BdeZQ"></form>
</li>
token付きでPOSTしているので手動でcsrf token を設定する必要がある。
@Vue component
<template>
<a href="/logout" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="fa fa-sign-out"></i>
Logout
</a>
<form id="logout-form" action="/logout" method="POST" style="display: none;">
<input type="hidden" name="_token" :value="csrf_token">
</form>
</template>
<script>
var csrf_token = $('meta[name="csrf-token"]').attr('content');
export default {
data() {
return {
token: csrf_token
}
}
}
</script>
参考: