如何为 Laravel Fortify + Inertia + vue 添加角色和权限？

Question

我的项目使用laravel强化，惯性与vue。我必须添加基于角色的权限（就像 spatie 权限包一样）。我仍然是一个初学者，要强化和惯性。但我有 spatie 包的经验。我坚持如何添加角色和权限来强化。目前我正计划创建 table 结构，如 spatie 包具有（角色、权限、roles_has_permissions 等）。是否有每个构建包或更好的方法来实现角色和权限？并在 vue 文件中使用“@can”？谢谢。

编辑

大家好，这是我目前正在做的（我现在正在使用它）。它正在工作，但仍需要一些改进，（我真的很感激任何更好的解决方案）

1) 照常安装和配置 spatie/laravel-permission

2) 使用 seeder

向 table 添加了预定义的权限和角色

在用户模型中创建函数以获取权限数组列表

// user model function
public function getPermissionArray()
 {
     return $this->getAllPermissions()->mapWithKeys(function($pr){
         return [$pr['name'] => true];
     });

 }

并将该功能添加到惯性中间件

//App\Http\Middleware\HandleInertiaRequests
public function share(Request $request)
{
     return array_merge(parent::share($request), [
          'auth'=>['user' => $request->user() ?   $request->user()->only('id', 'name', 'email') : null,
                    'can' =>$request->user() ? $request->user()->getPermissionArray() : []
                ],
        ]);
}

现在$page.props.auth.can可以全局访问

在vue文件中添加权限检查

   <div class="row">
              <div class="col-sm-12 col-md-6" v-if="$page.props.auth.can['user_create']">
                <inertia-link
                  class="btn btn-primary"
                  :href="$route('admin.user.create')"
                  >Create New
                </inertia-link>
              </div>
   </div>

Answer 1

我解决了如下问题，首先我将权限数组发送到 UI.

在用户模型中

<?php
    // user model function
    public function getPermissionArray()
     {
         return $this->getAllPermissions()->mapWithKeys(function($pr){
             return [$pr['name'] => true];
         });
    
     }

惯性共享中间件

<?php
//App\Http\Middleware\HandleInertiaRequests
public function share(Request $request)
{
     return array_merge(parent::share($request), [
          'auth'=>['user' => $request->user() ?   $request->user()->only('id', 'name', 'email') : null,
                    'can' =>$request->user() ? $request->user()->getPermissionArray() : []
                ],
        ]);
}

在应用程序 js 文件中，我添加了全局函数来检查一个或多个权限是否具有用户

import Vue from 'vue'


Vue.mixin({
  methods: {
    hasAnyPermission: function (permissions) {

      var allPermissions = this.$page.props.auth.can;
      var hasPermission = false;
      permissions.forEach(function(item){
        if(allPermissions[item]) hasPermission = true;     
      });
      return hasPermission;
    },
  },
})

在 vue 组件中：

<script>
       
   export default {
       data() {
            return {};
       },
      mounted: function () {},
      methods: {},
   };
</script>
        
<template>
      <div>  
          <li v-if="hasAnyPermission(['testiml_view', 'testiml_edit', 'testiml_create'])">
              <inertia-link
                :href="$route('admin.testimonial.index')"
                class="side-nav-link-a-ref"
              >
                <i class="fas fa-feather"></i>
                <span>Testimonial</span>
              </inertia-link>
            </li>
</div>
</template>

Answer 2

在惯性中间件的 share 方法中：HandleInertiaRequest.php，我使用以下方法将权限和角色数组传递给 Vue：

        $permissions = $user->getAllPermissions()->pluck('name');
        $roles = $user->roles()->pluck('name');
        return array_merge(parent::share($request), [
            'auth.user' => fn() => $request->user() ?
                $request->user()->only('id', 'name', 'email', 'roles')
                : null,
            'auth.user.permissions' => $permissions,
            'auth.user.roles' => $roles
        ]);

如何为 Laravel Fortify + Inertia + vue 添加角色和权限？

How to Add Roles and Permission to Laravel Fortify + Inertia + vue?

inertiajs

laravel

laravel-fortify

编辑