SPA、中间件和 VueRouter

Question

我正在从事一个利用 Vue2、VueRouter 和 Laravel 5.4 的项目。它是一个单页应用程序。 Laravel 用于 API 身份验证的护照（来自我的 Vue 组件的 AXIOS 调用）。

该应用程序的大部分内容都来自一个 blade 文件（类似这样的文件）：

<?php
//styling and the like
//...
//components being loaded here
<router-view></router-view>

//pull in the app.js file with vue router instantiation and routes
<script src="..."></script>

所有组件和路由都在一个 app.js 文件中定义，该文件被拉入此文件。

通过此 blade 文件提供的组件都需要身份验证；用户必须登录并注册。

但是，该应用程序将有一个页面供 non-registered 用户访问。拥有 URL 的任何人都可以访问该页面；但是，在获得页面访问权限之前，他们需要输入安全密码。

该页面实质上是一个表单，用户将填写并提交该表单。它还会预先从数据库中提取一些数据，以填充页面上的一些详细信息。

我还没有打算做任何这种性质的事情，也很难找到如何做的例子。虽然我对如何去做有一些想法，但这是我最好的猜测：

创建一个新的 JS 文件来托管一个新的路由器。
创建一个新的 blade 文件来承载 router-view element。它将拉入新创建的 JS 文件。
将新建的blade文件的路由添加到web.php文件中；创建将拦截任何对 URL test/{id} 的尝试访问的中间件。如果中间件检查成功，并且用户输入了有效密码，中间件将传递查看资源的请求。否则，重定向错误。

web.php 文件:

//Route for those people who are taking a test
Route::get('/test/{id}', 'TestController@serveTest');

//The authenticate view
Route::get('/authenticate/{id}', 'TestController@serveAuthenticate')
            ->name('authenticate')
            ->middleware('auth.test');

测试控制器文件：

<?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');
    }
}

中间件：

<?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()->route('authenticate', ['id' => $request->route('id')]);
        }

        //Let user access resource since it must not be password protected
        return $next($request);
    }
}

新建blade文件：

<?php
//Load the one component
<router-view></router-view>

//pull in the protectedPage.js file with vue router instantiation and routes
//this is a different file than in the first blade view
<script src="..."></script>

这样做好吗？我想这种方法存在一些问题，并且创建一个 vue-router 来拉入一个组件并不是最佳选择。

Answer 1

最佳做法是将前端和后端分开。由于您使用的是 Laravel Passport，因此您将使用 JWT 从 VueJS 登录用户。

所以 Laravel 本质上将充当 API，这意味着它不应该保持任何状态。所有内容都将使用 access_token（由 api 生成并提供给客户）

检查

受限页面:

Laravel 将有一个中间件来检查用户是否可以检索信息（使用令牌）
VueRouter 将有一个导航守卫来防止用户访问受限页面（可以通过检查令牌是否存在或通过其他属性）

SPA、中间件和 VueRouter

SPA, Middleware, and VueRouter

single-page-application

laravel-5

vue-router

vuejs2