在我的案例中，如何使用 vue-auth 限制具有特定角色的路由？

Question

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

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

对于角色，我使用 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' }
  }
}

},

我认为这是因为我在 "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 轻松捕获此错误并显示访问被拒绝留言

在我的案例中，如何使用 vue-auth 限制具有特定角色的路由？

How to constraint a route with a specific role in my case with vue-auth?

laravel

vue.js

vuejs2