如何在 Angular 中使用 Laravel @can()

Question

我有一个使用 Spatie-Permission 完全是 Laravel-8 的项目。一切正常。

但团队决定使用 Laravel-8 作为后端，使用 Angular-11 作为前端。

最初，在纯 Laravel 中，它是这样的：

控制器

public function index()
{
     if (! Gate::allows('role_access')) {
        return abort(401);
    }
    $roles = Role::all();

    return view('admin.roles.index', compact('roles'));
}

查看刀片：

@can('role_access')
<li class="nav-item">
  <a href="{{ route(" admin.roles.index ") }}" class="nav-link {{ request()->is('admin/roles') || request()->is('admin/roles/*') ? 'active' : '' }}">
    <i class="nav-icon fas fa-briefcase"></i>
    <p>
      Role
    </p>
  </a>
</li>
@endcan

现在我已经将前端转换为 Angular，我有：

public function index(Request $request)
{
    if(!Auth::user()->hasPermissionTo('role_access'))
        return response()->json([ "message" => 'User do not have permission'], 401);
    if(($request->get('sort')!='null' && $request->get('sort')!='') && $request->get('search')) {
        $role = Role::with('permissions')->where("name", "LIKE", "%{$request->get('search')}%")->orderby($request->get('sort'), $request->get('order'))->paginate(10);
    } else if(($request->get('sort')!='null' && $request->get('sort')!='')){
        $role = Role::with('permissions')->orderby($request->get('sort'), $request->get('order'))->paginate(10);
    }
    else if($request->get('search'))
        $role = Role::with('permissions')->where("name", "LIKE", "%{$request->get('search')}%")->paginate(10);
    else
        $role = Role::with('permissions')->paginate(10);
    return response()->json($role, 200);
}

当它纯粹是 Laravel 时，我使用 @can() 来表示用户只能看到的方面。例如，只有拥有 role_access 权限的用户才能看到它。

如何将 Laravel 视图刀片中的 @can() 转换为 Angular？

谢谢

Answer 1

您可以像这样从登录用户那里获得所有权限

$permissions = auth()->user()?->role()->with('permissions')->get()
    ->pluck('permissions')
    ->flatten()
    ->pluck('name')
    ->toArray();
return $permissions;

然后在 javascript 端 angular ,react or vuejs 你可以创建一个这样的助手

const can = (permissions, can) => {
    if (permissions) {
        return permissions.some(r => can.includes(r))
    }

    return false;
};

那么您可以在任何地方使用can(permissions,'read_pust') 这里permissions 是从服务器获取并存储在cookie 或本地存储中

EX：我在 vuejs 中使用这个 v-if="$helpers.can(permissions, ['node_read'])" 这个你可以创建这样的助手