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

Question

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

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

最初，在纯 Laravel 中，它看起来像这样：

控制器

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

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

查看blade:

@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

现在我已经将 front-end 转换为 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 视图 blade 中的 @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: i use this v-if="$helpers.can(permissions, ['node_read'])" this in vuejs you can create helper like this

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

How to use Laravel @can() in Angular

laravel

angular

laravel-permission