如何在Angular中使用Laravel @can() [英] How to use Laravel @can() in Angular

问题描述

我有一个使用Spatie-Permission的完全是Laravel-8的项目.一切都很好.

I have a project that is fully Laravel-8 using Spatie-Permission. Everything is working well.

但是团队决定将Laravel-8用作后端，而将Angular-11用作前端.

But the team decided to use Laravel-8 as backend and Angular-11 as front-end.

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

Initially, in the pure Laravel, it looks like this:

控制器

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，我有:

Now that I've transformed the front-end into Angular, I have:

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权限的用户才能看到它.

When it was purely Laravel, I used @can() for the aspect users should only see. For instance only users with that have permission to role_access will see it.

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

How do I transform @can() in Laravel view blade into Angular?

谢谢

推荐答案

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

you can get all the permission from login user like this

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

然后在javascript端 angular，react或vuejs 中，您可以创建这样的帮助器

then in javascript side angular ,react or vuejs you can create a helper like this

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

    return false;
};

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

then you can use anywhere can(permissions,'read_pust') here permissions is get from server and store in cookie or localstorage

EX:我在vuejs中使用此 v-if ="$ helpers.can(permissions，['node_read'])" ，您可以像这样创建帮助器

EX: i use this v-if="$helpers.can(permissions, ['node_read'])" this in vuejs you can create helper like this

这篇关于如何在Angular中使用Laravel @can()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！