SPA中的Laravel 5.8和VueJS2身份验证

Question

我正在建立一个水疗中心，后端为Laravel，前端为VueJS2。该应用程序将处理具有3种角色的用户：UserRole1、UserRole2和Admin。当用户注册应用程序时，他选择是希望成为Role1用户还是Role2用户（admin用户由我直接在mysql数据库中设置）。因此，在数据库中有一个表“users”，其中有一个名为“role”的字段：

• 用户角色1=

当用户登录时，我想将其重定向到基于角色的仪表板，因此我有3个不同的Vue组件和3个路由，我想阻止具有Role1（或Role2）的用户访问Role2或Admin仪表板。显然，如果来宾尝试访问仪表板，它将被重定向到登录页面，如果经过身份验证的用户尝试访问来宾页面（如注册页面），它将被重定向到仪表板页面。

我想为每个路由设置一个"userRole"参数，如下所示：

    {
        path: '/app/userRole1/Dashboard',
        component: DashboardUserRole1,
        name: 'dashboardRole1',
        meta: {
            title: 'Dashboard Role1',
            userRole: 1
        },
    },
    {
        path: '/app/userRole2/Dashboard',
        component: DashboardUserRole2,
        name: 'dashboardRole2',
        meta: {
            title: 'Dashboard Role2',
            userRole: 2
        },
    },
    {
        path: '/app/Admin/Dashboard',
        component: DashboardAdmin,
        name: 'dashboardAdmin',
        meta: {
            title: 'Dashboard Admin',
            userRole: 7
        },
    },

我已经尝试了Laravel Passport API，现在我正在尝试JWT和websanova/vue-auth，所以在“登录”组件中有一个对“api/auth/loign”路由的发布请求，该请求将数据传递给AuthController@authenticate方法，该方法返回一个JSON响应。但是vue-auth包不太适合我的需求，所以我认为可以有一个更有效的解决方案，但实际上我不知道如何编写合适的代码。我想知道你是否有一些想法。

Answer 1

一个简单的解决方案是定义一个api路由来检索关于已验证用户的信息。Laravel默认的api.php路由文件包含以下路由：

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

您可以修改它以包含应用程序需要了解的关于用户的任何信息，以便处理路由逻辑：

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user()->load('roles');
});

然后你的流程看起来像这样：

1. 正常登录

如果混淆是围绕步骤3，那么这个stackoverflow问题可能会有所帮助。