monteecristoo’s blog

https://twitter.com/irakaarozo

Vue.js within Laravel Authentication from Vue component

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>

 

参考:

monteecristoo.hatenablog.com

stackoverflow.com