README

更新：现在支持 Vue 3

npm 包

Composer 包

安装后，在 Vuejs 中可以这样使用

<div v-if="can('edit post')">
  <!-- Edit post form -->
</div>

<div v-if="is('super-admin')">
  <!-- Show admin tools -->
</div>

<!-- you can use OR operator -->
<div v-if="can('edit post | delete post | publish post')">
  <!-- Do something -->
</div>

<div v-if="is('editor | tester | user')">
  <!-- Do something -->
</div>

<!-- you can use AND operator -->
<div v-if="can('edit post & delete post & publish post')">
  <!-- Do something -->
</div>

<div v-if="is('editor & tester & user')">
  <!-- Do something -->
</div>

如果您需要在 <script> 或 <script setup> 标签中使用它

<script setup>
  import { is, can } from 'laravel-permission-to-vuejs'
  
  if(is('super-admin')){
    // do admin actions
  }
	
  if(can('edit post')){
    // do edit post action
  }
</script>

此包需要使用 laravel-permission

安装

PHP 方面

composer require ahmedsaoud31/laravel-permission-to-vuejs=dev-master

JavaScript 方面 VueJs 3

npm i laravel-permission-to-vuejs

JavaScript 方面 VueJs 2

npm i laravel-permission-to-vuejs@2.0.5

配置

首先，将 LaravelAndVueJS\Traits\LaravelPermissionToVueJS 特性添加到您的 User 模型中

use LaravelAndVueJS\Traits\LaravelPermissionToVueJS;

// Spatie package
use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use LaravelPermissionToVueJS;
    
    // Spatie package
    use HasRoles;

    // ...
}

其次，在 app.js 文件中添加并使用 laravel-permission-to-vuejs 插件

import { createApp } from 'vue'
import LaravelPermissionToVueJS from 'laravel-permission-to-vuejs'
import App from './components/App.vue'
const app = createApp(App)
app.use(LaravelPermissionToVueJS)
app.mount('#app')

第三，从 Laravel 传递权限到 Vuejs，在 HTML 头部添加以下代码

<script type="text/javascript">
    window.Laravel = {
        csrfToken: "{{ csrf_token() }}",
        jsPermissions: {!! auth()->check()?auth()->user()->jsPermissions():0 !!}
    }
</script>

如果您需要更新角色和权限或在不重新加载应用程序的情况下切换用户后重新加载用户身份验证，您可以使用 reloadRolesAndPermissions() 函数

// in component
<script>
    import { reloadRolesAndPermissions } from 'laravel-permission-to-vuejs'

    // after your event call reloadRolesAndPermissions() function
    reloadRolesAndPermissions()
</script>

许可证

MIT 许可证 (MIT)。