title: Vue Router and Laravel Middlewares
body: <p>I have different routes on my applications:</p>
  
  <pre><code>GET /game/{any}
  </code></pre>
  
  <p>This route is protected by Laravel auth middleware.
  Inside this Laravel route I want to build SPA and provide Vue router:</p>
  
  <pre><code>const routes = [
    { path: '/game/start', component: GameStart },
    { path: '/game/stats', component: GameStats }
  ]
  </code></pre>
  
  <p>And I have 'main' route which is not protected by any Laravel Middleware</p>
  
  <pre><code>GET /{any}
  </code></pre>
  
  <p>Whole Vue Router looks like this:</p>
  
  <pre><code>const routes = [
        // Not protected URLs
        { path: '/', component: Main },
        { path: '/news', component: News },
  
        // Protected URLs
        { path: '/game/start', component: GameStart },
        { path: '/game/stats', component: GameStats }
      ]
  </code></pre>
  
  <p>So my question is:
  Is it good idea to mixed up back-end and front-end like this?
  Because I'm assuming that '/game/*' routers is not protected on front-end part.</p>
  
  <p>Or should I use Laravel Passport and token auth on frond-end?</p>