在我的案例中,如何使用vue-auth约束具有特定角色的路由?

时间:2019-07-12 09:10:23

标签: laravel vue.js vuejs2

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

我尝试禁止通过角色访问路由(视图路由器)。

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

我这样设置了视图身份验证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对象,但我不知道该如何调用它才能工作

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

像这样使用服务器端安全性而不是客户端

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轻松捕获此错误并显示“访问被拒绝”消息