Question

我正在开发一个利用Vue2，VueRouter和Laravel 5.4的项目。这是一个单页面应用程序。用于API身份验证的Laravel Passport（来自我的Vue组件的AXIOS调用）。

大多数应用都是通过一个刀片文件提供的（如下所示）：

<?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文件中定义，该文件在此文件中提取。

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

但是，该应用程序将有一个页面，非注册用户可以访问。任何拥有该URL的人都可以访问该页面;但是，在访问页面之前，他们需要输入安全密码。

该页面基本上是用户将填写并提交的表单。它还会预先从数据库中提取一些数据，以填充页面上的一些细节。

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

创建一个将托管新路由器的新JS文件。
创建一个将托管router-view element的新刀片文件。它将引入新创建的JS文件。
将新创建的刀片文件的路由添加到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);
    }
}

新刀片文件：

<?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将有一个middlware来检查用户是否可以检索信息（使用令牌）
VueRouter将有一个导航防护，以防止用户访问受限制的页面（可以通过检查是否存在令牌或其他属性）

SPA，中间件和VueRouter

1 个答案: