After installed you can do like this in 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>This package require to use laravel-permission
composer require ahmedsaoud31/laravel-permission-to-vuejs=dev-masternpm i laravel-permission-to-vuejsnpm i [email protected]First, add the LaravelAndVueJS\Traits\LaravelPermissionToVueJS trait to your User model(s):
use LaravelAndVueJS\Traits\LaravelPermissionToVueJS;
// Spatie package
use Spatie\Permission\Traits\HasRoles;
class User extends Authenticatable
{
use LaravelPermissionToVueJS;
// Spatie package
use HasRoles;
// ...
}Second, add and use the laravel-permission-to-vuejs plugin in app.js file:
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')Third, pass permissions from Laravel To Vuejs, in HTML header add this code:
<script type="text/javascript">
window.Laravel = {
csrfToken: "{{ csrf_token() }}",
jsPermissions: {!! auth()->check()?auth()->user()->jsPermissions():0 !!}
}
</script>##OR use Axios to get permissons data from server
// in app.js
axios.get('/get-permissions').then(
response => {
window.Laravel.jsPermissions = response.data;
}
);
import LaravelPermissionToVueJS from 'laravel-permission-to-vuejs'
...
.use(LaravelPermissionToVueJS)
// in laravel route
Route::get('/get-permissions', function () {
return auth()->check()?auth()->user()->jsPermissions():0;
});
The MIT License (MIT).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent