Laravel 將 axios 的 header 預設包含 Authorization

方便每一頁都能自動包含 api_token 我們採取這樣的做法：

先在最基本的 layout 裡面加入 meta data，可以直接修改
resources/views/layouts/app.blade.php
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

@if (auth()->check())
<meta name="api-token" content="{{ auth()->user()->api_token }}">
@endif

當使用者是認證過的，每一頁就會塞 token 在裡面。

另外在 bootstrap.js 裡面加入 header 資訊
resources/assets/js/bootstrap.js
let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

let api_token = document.head.querySelector('meta[name="api-token"]');

if (api_token) {
  window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + api_token.content;
}

修改過了 bootstrap.js 所以我們要重新 compile 來產生 public/js/app.js 之後頁面才會正常作用。生產的方式請參考下方的資料。

新的 app.js 生成之後記得重新載入頁面，以免因為 cache 的關係而導致結果不如預期。

接著我們使用的 axios 送 request 就會自動在 header 裡面帶上 api_token 囉。

參考資料：
https://laravel.com/docs/5.6/mix