title: Vue.js / Laravel - Handle logout correctly
body: <p>I am currently trying to create a simple SPA using Vue and Laravel. I've got the basics to work - users can register and login. </p>
  
  <p>I just can't figure out how to create a logout function.</p>
  
  <p>This is what I currently have:</p>
  
  <p><code>AuthController.php</code>:</p>
  
  <pre><code>public function logout()
  {
          $accessToken = auth()-&gt;user()-&gt;token();
  
          $refreshToken = DB::table('oauth_refresh_tokens')
          -&gt;where('access_token_id', $accessToken-&gt;id)
          -&gt;update([
              'revoked' =&gt; true
          ]);
  
          $accessToken-&gt;revoke();
  
          return response()-&gt;json(['status' =&gt; 200]);
  }
  </code></pre>
  
  <p><code>routes/api.php</code>:</p>
  
  <pre><code>Route::middleware('auth:api')-&gt;group(function () {
      Route::post('/logout', 'API\AuthController@logout');
      Route::get('/get-user', 'API\AuthController@getUser');
  });
  </code></pre>
  
  <p>Right now, this is what I have tried to do:</p>
  
  <p><code>Layout.vue</code>:</p>
  
  <pre><code>methods: {
              logout() {
                  axios.post('/api/logout').then(response =&gt; {
                      this.$router.push("/login")
  
                  }).catch(error =&gt; {
                      location.reload();
                  });
              }
   }
  </code></pre>
  
  <p>Which calls my logout function in <code>Auth.js</code>:</p>
  
  <pre><code>logout() {
      localStorage.removeItem('token')
      localStorage.removeItem('expiration')
  }
  </code></pre>
  
  <p>However, when users click on the logout function, they are not logged out immediately (redirected to the login page) - they can still browse "user only pages". </p>
  
  <p>I have to refresh the page before I am properly logged out.</p>
  
  <p>Can anyone assist me with this? Is this even the right approach to a "secure" logout function?</p>