title: SPA, Middleware, and VueRouter
body: <p>I am working on a project that utilizes Vue2, VueRouter, and Laravel 5.4. It is a single page application. Laravel Passport for API authentication (AXIOS calls from my Vue components).</p>
  
  <p>The majority of the app is served from one blade file (something like this):</p>
  
  <pre><code>&lt;?php
  //styling and the like
  //...
  //components being loaded here
  &lt;router-view&gt;&lt;/router-view&gt;
  
  //pull in the app.js file with vue router instantiation and routes
  &lt;script src="..."&gt;&lt;/script&gt;
  </code></pre>
  
  <p>All components and routes are defined in an app.js file, that is pulled in this file.</p>
  
  <p>The components being served through this blade file all require authentication; the user has to be signed in and registered. </p>
  
  <p>However, the application will have one page which will be accessible to non-registered users. Anyone with the URL can access the page; however, before given access to the page, they will need to enter a security passcode.</p>
  
  <p>The page will essentially be a form that the user will fill out and submit. It will also pull some data from the database beforehand, to populate some details on the page.</p>
  
  <p>I have not set out to do anything of this nature and had trouble finding examples on how to do so. Though I have some ideas on how to go about it, this is my best guess:</p>
  
  <ol>
  <li>Create a new JS file that will host a new router. </li>
  <li>Create a new blade file that will host the <code>router-view element</code>. It will pull in the newly created JS file.</li>
  <li>Add route for the newly created blade file to the <code>web.php</code> file; create middleware that will intercept any attempted access to the URL <code>test/{id}</code>. If the middleware check is successful, and the user enters in a valid passcode, the middleware will pass along the request to view the resource. Otherwise, a redirect with an error.</li>
  </ol>
  
  <p>web.php file:</p>
  
  <pre><code>//Route for those people who are taking a test
  Route::get('/test/{id}', 'TestController@serveTest');
  
  //The authenticate view
  Route::get('/authenticate/{id}', 'TestController@serveAuthenticate')
              -&gt;name('authenticate')
              -&gt;middleware('auth.test');
  </code></pre>
  
  <p>The test controller file:</p>
  
  <pre><code>&lt;?php
  namespace App\Http\Controllers;
  use Illuminate\Http\Request;
  use App\Test;
  
  class TestController extends Controller
  {
      public function serveTest(Request $request) {
          return View('layouts.test');
      }
  
      public function serveAuthenticate() {
          return View('authenticate');
      }
  }
  </code></pre>
  
  <p>The middleware:</p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Middleware;
  
  use Closure;
  use App\Test;
  
  class verifyTestAccess {
      public function handle($request, Closure $next) {   
          //Calculate some conditions here
          //...
  
          //Direct user to the authentication view if some condition is true
          if($hasPasscode) {
              return redirect()-&gt;route('authenticate', ['id' =&gt; $request-&gt;route('id')]);
          }
  
          //Let user access resource since it must not be password protected
          return $next($request);
      }
  }
  </code></pre>
  
  <p>New blade file:</p>
  
  <pre><code>&lt;?php
  //Load the one component
  &lt;router-view&gt;&lt;/router-view&gt;
  
  //pull in the protectedPage.js file with vue router instantiation and routes
  //this is a different file than in the first blade view
  &lt;script src="..."&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Is this a good way to do it? I imagine there are some problems with this approach, and that it is not optimal to create a vue-router for pulling in one component.</p>