title: How to combine Session and API authentication in Laravel?
body: <p>I have a simple project that has only 3 tables. The <code>users</code>, <code>table2</code>, and <code>table3</code>.</p>
  
  <p><strong>The User schema</strong></p>
  
  <pre><code>Schema::create('users', function (Blueprint $table) {
    $table-&gt;bigIncrements('id');
    $table-&gt;string('username')-&gt;unique();
    $table-&gt;string('password');
    $table-&gt;string('api_token')-&gt;unique();
    $table-&gt;rememberToken();
    $table-&gt;timestamps();
  });
  </code></pre>
  
  <p>The other 2 tables are accessible via API resource.</p>
  
  <p>Here are my routes:</p>
  
  <p><strong>routes/web.php</strong></p>
  
  <pre><code>Route::get('/', 'Auth\LoginController@showLogin')-&gt;name('login');
  Route::post('/login', 'Auth\LoginController@login');
  Route::get('/logout', 'Auth\LoginController@logout')-&gt;name('logout');
  //Authenticated users will be redirected here
  Route::get('/home', 'HomeController@index')-&gt;name('home');
  </code></pre>
  
  <p><strong>routes/api.php</strong></p>
  
  <pre><code>Route::resource('/table1', 'Table1Controller');
  Route::resource('/table2', 'Table2Controller');
  </code></pre>
  
  <p>I've added the <code>auth:api</code> middleware in the <code>Table1Controller</code> and <code>Table2Controller</code>.</p>
  
  <pre><code>public function __construct()
  {
      $this-&gt;middleware('auth:api');
  }
  </code></pre>
  
  <p>So I only have 2 pages to be exact. The main page where the authenticated user goes to and the login page.</p>
  
  <p>When a user is added, it also saves a random string <code>api_token</code> to it's row.</p>
  
  <p>I am using VueJS and I don't want to make a mess and use Node with this one. So I've downloaded the <code>vue.min.js</code> and just include it in my <code>blade</code> files.</p>
  
  <p>So when you login, you will be redirected to <code>/home</code> page. The layout page of my pages has this one:</p>
  
  <pre><code>&lt;script src="{{ asset('js/vue.min.js') }}"&gt;&lt;/script&gt;
  &lt;script src="{{ asset('js/axios.min.js') }}"&gt;&lt;/script&gt;
  &lt;script&gt;
  const user = @json(Auth::user());
  
  const http = axios.create({
    baseURL: '/api',
    headers: {
      'Authorization': user ? 'Bearer ' + user.api_token : ''
    }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>With the code above, you should be able to access the table1 and table2 apis when you send a request.</p>
  
  <p>Now I know I could've just used webpack and make my app a SPA and just use passport or maybe just jwt. But I don't want since it's a very simple app and I want to do actions without refreshing my pages like adding data in table, editing data and show it in a modal, etc.</p>
  
  <p>By the way, this app will be used by the same app only. No other services will access it. I just want to use Vue for reactiveness and avoid full page reloads.</p>
  
  <p>Is there a better way of doing this that I am missing?</p>