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

Question

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

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

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

我这样设置 view-auth rolesVar：

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' }
  }
}

},

我认为这是因为我在“角色”中有几个 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 轻松捕获此错误并显示访问被拒绝消息