在我使用vue-auth的情况下，如何约束具有特定角色的路由？

Question

我在SPA中使用Vue-js开发了我的第一个Laravel应用程序。

我尝试禁止通过角色访问路由(view-router)。

对于角色，我使用spatie/laravel-permission包。

我像这样设置rolesVar -auth视图：

const config = {
   rolesVar: 'roles',
   …
}

下面是一个使用json的用户示例。

{
   "status":"success",
   "data":{
      "id":1,
      "first_name":"John",
      "last_name":"Doe",
      "email":"john@Doe",
      "created_at":"2019-07-11 11:20:20",
      "updated_at":"2019-07-11 11:20:20",
      "all_permissions":[

      ],
      "can":[

      ],
      "permissions":[

      ],
      "roles":[
         {
            "id":1,
            "name":"super-admin",
            "guard_name":"api",
            "created_at":"2019-07-11 11:20:20",
            "updated_at":"2019-07-11 11:20:20",
            "pivot":{
               "model_id":1,
               "role_id":1,
               "model_type":"App\\Models\\User"
            },
            "permissions":[

            ]
         }
      ]
   }
}

我试着像这样强迫我的角色，但它不起作用。我被重定向到/ 403 (根据请求)。

我的结论是，他没有承担我的角色。

{
path: '/admin',
name: 'admin.dashboard',
component: AdminDashboard,
meta: {
  auth: {
    roles: { name: 'super-admin' },
    redirect: { name: 'login' },
    forbiddenRedirect: { path: '/403' }
  }
}

},

我认为这是因为我在"roles“中有几个json对象，但我不知道如何调用它才能正常工作

感谢您的帮助！

Answer 1

使用服务器端安全性，而不是客户端，如下所示

Route::group(['middleware' => ['permission:permission1|permission2']], function () {
    Route::get('/protected_URL',function(){
        return "I can only access this if i only have permission1 and permission2";
    });
});

只有经过身份验证的用户和具有"permission1“和"permission2”权限的用户才有权访问此页面，否则它将认为出现访问被拒绝错误，您可以使用axios轻松捕获此错误并显示访问被拒绝消息