├── .gitignore
├── README.md
├── composer.json
├── routes
    └── web.php
└── src
    ├── LaravelAndVueJSServiceProvider.php
    ├── Traits
        └── LaravelPermissionToVueJS.php
    └── js
        ├── README.md
        ├── index.js
        └── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | /.git
2 | /vendor
3 | composer.lock
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Laravel permission to Vuejs
  2 | ## Update: now support Vue 3
  3 | 
  4 | ## npm package
  5 | [![Total Downloads](https://img.shields.io/npm/dt/laravel-permission-to-vuejs)](https://www.npmjs.com/package/laravel-permission-to-vuejs)
  6 | [![Version](https://img.shields.io/npm/v/laravel-permission-to-vuejs)](https://www.npmjs.com/package/laravel-permission-to-vuejs)
  7 | [![License](https://img.shields.io/npm/l/laravel-permission-to-vuejs)](https://en.wikipedia.org/wiki/MIT_License)
  8 | 
  9 | ## Composer package
 10 | [![Total Downloads](https://img.shields.io/packagist/dt/ahmedsaoud31/laravel-permission-to-vuejs)](https://packagist.org/packages/ahmedsaoud31/laravel-permission-to-vuejs)
 11 | [![License](https://img.shields.io/npm/l/laravel-permission-to-vuejs)](https://en.wikipedia.org/wiki/MIT_License)
 12 | 
 13 | After installed you can do like this in [Vuejs](https://vuejs.org/):
 14 | ```html
 15 | <div v-if="can('edit post')">
 16 |   <!-- Edit post form -->
 17 | </div>
 18 | 
 19 | <div v-if="is('super-admin')">
 20 |   <!-- Show admin tools -->
 21 | </div>
 22 | 
 23 | <!-- you can use OR operator -->
 24 | <div v-if="can('edit post | delete post | publish post')">
 25 |   <!-- Do something -->
 26 | </div>
 27 | 
 28 | <div v-if="is('editor | tester | user')">
 29 |   <!-- Do something -->
 30 | </div>
 31 | 
 32 | <!-- you can use AND operator -->
 33 | <div v-if="can('edit post & delete post & publish post')">
 34 |   <!-- Do something -->
 35 | </div>
 36 | 
 37 | <div v-if="is('editor & tester & user')">
 38 |   <!-- Do something -->
 39 | </div>
 40 | ```
 41 | 
 42 | If you need to use it in <script> or <script setup> tag
 43 | ```html
 44 | <script setup>
 45 |   import { is, can } from 'laravel-permission-to-vuejs'
 46 |   
 47 |   if(is('super-admin')){
 48 |     // do admin actions
 49 |   }
 50 | 	
 51 |   if(can('edit post')){
 52 |     // do edit post action
 53 |   }
 54 | </script>
 55 | ```
 56 | This package require to use [laravel-permission](https://github.com/spatie/laravel-permission)
 57 | 
 58 | ## Installation
 59 | 
 60 | ##### PHP side
 61 | ```json
 62 | composer require ahmedsaoud31/laravel-permission-to-vuejs=dev-master
 63 | ```
 64 | ##### JavaScript side VueJs 3
 65 | ```json
 66 | npm i laravel-permission-to-vuejs
 67 | ```
 68 | 
 69 | ##### JavaScript side VueJs 2
 70 | ```json
 71 | npm i laravel-permission-to-vuejs@2.0.5
 72 | ```
 73 | 
 74 | ## Config
 75 | First, add the `LaravelAndVueJS\Traits\LaravelPermissionToVueJS` trait to your `User` model(s):
 76 | ```php
 77 | use LaravelAndVueJS\Traits\LaravelPermissionToVueJS;
 78 | 
 79 | // Spatie package
 80 | use Spatie\Permission\Traits\HasRoles;
 81 | 
 82 | class User extends Authenticatable
 83 | {
 84 |     use LaravelPermissionToVueJS;
 85 |     
 86 |     // Spatie package
 87 |     use HasRoles;
 88 | 
 89 |     // ...
 90 | }
 91 | ```
 92 | Second, add and use the `laravel-permission-to-vuejs` plugin in `app.js` file:
 93 | ```js
 94 | import { createApp } from 'vue'
 95 | import LaravelPermissionToVueJS from 'laravel-permission-to-vuejs'
 96 | import App from './components/App.vue'
 97 | const app = createApp(App)
 98 | app.use(LaravelPermissionToVueJS)
 99 | app.mount('#app')
100 | ```
101 | Third, pass permissions from Laravel To Vuejs, in HTML header add this code:
102 | ```html
103 | <script type="text/javascript">
104 |     window.Laravel = {
105 |         csrfToken: "{{ csrf_token() }}",
106 |         jsPermissions: {!! auth()->check()?auth()->user()->jsPermissions():0 !!}
107 |     }
108 | </script>
109 | ```
110 | 
111 | If you need to update roles and permission or reload user authintaction after switch user without reload the application, You can use reloadRolesAndPermissions() function
112 | ```html
113 | // in component
114 | <script>
115 |     import { reloadRolesAndPermissions } from 'laravel-permission-to-vuejs'
116 | 
117 |     // after your event call reloadRolesAndPermissions() function
118 |     reloadRolesAndPermissions()
119 | </script>
120 | ```
121 | ## License
122 | 
123 | The MIT License (MIT).


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "ahmedsaoud31/laravel-permission-to-vuejs",
 3 |     "description": "Laravel Permission Package To Use it in VueJs",
 4 |     "type": "plugin",
 5 |     "require": {
 6 |         "spatie/laravel-permission": ">=2.0"
 7 |     },
 8 |     "autoload": {
 9 |         "psr-4": {
10 |             "LaravelAndVueJS\\": "src"
11 |         }
12 |     },
13 | 	"extra": {
14 | 		"laravel": {
15 | 			"providers": [
16 | 				"LaravelAndVueJS\\LaravelAndVueJSServiceProvider"
17 | 			]
18 | 		}
19 | 	},
20 |     "license": "MIT",
21 |     "authors": [
22 |         {
23 |             "name": "Ahmed Abeoelsaoud",
24 |             "email": "ahmedsaoud31@gmail.com"
25 |         }
26 |     ],
27 |     "minimum-stability": "dev"
28 | }
29 | 


--------------------------------------------------------------------------------
/routes/web.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | use Illuminate\Support\Facades\Route;
4 | 
5 | Route::group(['middleware' => 'web'], function () {
6 |     Route::get('/get-laravel-permission-to-vuejs', function () {
7 |         return auth()->check()?auth()->user()->jsPermissions():0;
8 |     });
9 | });


--------------------------------------------------------------------------------
/src/LaravelAndVueJSServiceProvider.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | namespace LaravelAndVueJS;
 4 | 
 5 | use Illuminate\Support\ServiceProvider;
 6 | 
 7 | class LaravelAndVueJSServiceProvider extends ServiceProvider
 8 | {
 9 |     /**
10 |      * Bootstrap any package services.
11 |      *
12 |      * @return void
13 |      */
14 |     public function boot()
15 |     {
16 |         $this->loadRoutesFrom(__DIR__.'/../routes/web.php');
17 |     }
18 | 
19 |     /**
20 |      * Register any application services.
21 |      *
22 |      * @return void
23 |      */
24 |     public function register()
25 |     {
26 |         //
27 |     }
28 | }


--------------------------------------------------------------------------------
/src/Traits/LaravelPermissionToVueJS.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | namespace LaravelAndVueJS\Traits;
 3 | trait LaravelPermissionToVueJS
 4 | {
 5 |     /**
 6 |      * Get user permissions and roles.
 7 |      *
 8 |      * @return json
 9 |      */
10 | 	public function jsPermissions()
11 | 	{
12 | 		return json_encode($this->getPermissions());
13 | 	}
14 | 
15 | 	public function objPermissions()
16 | 	{
17 | 		return (object) $this->getPermissions();
18 | 	}
19 | 
20 | 	private function getPermissions()
21 | 	{
22 | 		return [
23 | 				'roles' => $this->getRoleNames(),
24 | 				'permissions' => $this->getAllPermissions()->pluck('name'),
25 | 			];
26 | 	}
27 | }
28 | 


--------------------------------------------------------------------------------
/src/js/README.md:
--------------------------------------------------------------------------------
  1 | # Laravel permission to Vuejs
  2 | ## Update: now support Vue 3
  3 | 
  4 | ## npm package
  5 | [![Total Downloads](https://img.shields.io/npm/dt/laravel-permission-to-vuejs)](https://www.npmjs.com/package/laravel-permission-to-vuejs)
  6 | [![Version](https://img.shields.io/npm/v/laravel-permission-to-vuejs)](https://www.npmjs.com/package/laravel-permission-to-vuejs)
  7 | [![License](https://img.shields.io/npm/l/laravel-permission-to-vuejs)](https://en.wikipedia.org/wiki/MIT_License)
  8 | 
  9 | ## Composer package
 10 | [![Total Downloads](https://img.shields.io/packagist/dt/ahmedsaoud31/laravel-permission-to-vuejs)](https://packagist.org/packages/ahmedsaoud31/laravel-permission-to-vuejs)
 11 | [![License](https://img.shields.io/npm/l/laravel-permission-to-vuejs)](https://en.wikipedia.org/wiki/MIT_License)
 12 | 
 13 | After installed you can do like this in [Vuejs](https://vuejs.org/):
 14 | ```html
 15 | <div v-if="can('edit post')">
 16 |   <!-- Edit post form -->
 17 | </div>
 18 | 
 19 | <div v-if="is('super-admin')">
 20 |   <!-- Show admin tools -->
 21 | </div>
 22 | 
 23 | <!-- you can use OR operator -->
 24 | <div v-if="can('edit post | delete post | publish post')">
 25 |   <!-- Do something -->
 26 | </div>
 27 | 
 28 | <div v-if="is('editor | tester | user')">
 29 |   <!-- Do something -->
 30 | </div>
 31 | 
 32 | <!-- you can use AND operator -->
 33 | <div v-if="can('edit post & delete post & publish post')">
 34 |   <!-- Do something -->
 35 | </div>
 36 | 
 37 | <div v-if="is('editor & tester & user')">
 38 |   <!-- Do something -->
 39 | </div>
 40 | ```
 41 | 
 42 | If you need to use it in <script> or <script setup> tag
 43 | ```html
 44 | <script setup>
 45 | 	import { is, can } from 'laravel-permission-to-vuejs'
 46 | 
 47 |   if(is('super-admin')){
 48 |     // do admin actions
 49 |   }
 50 | 	
 51 |   if(can('edit post')){
 52 |     // do edit post action
 53 |   }
 54 | </script>
 55 | ```
 56 | This package require to use [laravel-permission](https://github.com/spatie/laravel-permission)
 57 | 
 58 | ## Installation
 59 | 
 60 | ##### PHP side
 61 | ```json
 62 | composer require ahmedsaoud31/laravel-permission-to-vuejs=dev-master
 63 | ```
 64 | ##### JavaScript side VueJs 3
 65 | ```json
 66 | npm i laravel-permission-to-vuejs
 67 | ```
 68 | 
 69 | ##### JavaScript side VueJs 2
 70 | ```json
 71 | npm i laravel-permission-to-vuejs@2.0.5
 72 | ```
 73 | 
 74 | ## Config
 75 | First, add the `LaravelAndVueJS\Traits\LaravelPermissionToVueJS` trait to your `User` model(s):
 76 | ```php
 77 | use LaravelAndVueJS\Traits\LaravelPermissionToVueJS;
 78 | 
 79 | // Spatie package
 80 | use Spatie\Permission\Traits\HasRoles;
 81 | 
 82 | class User extends Authenticatable
 83 | {
 84 |     use LaravelPermissionToVueJS;
 85 |     
 86 |     // Spatie package
 87 |     use HasRoles;
 88 | 
 89 |     // ...
 90 | }
 91 | ```
 92 | Second, add and use the `laravel-permission-to-vuejs` plugin in `app.js` file:
 93 | ```js
 94 | import { createApp } from 'vue'
 95 | import LaravelPermissionToVueJS from 'laravel-permission-to-vuejs'
 96 | import App from './components/App.vue'
 97 | const app = createApp(App)
 98 | app.use(LaravelPermissionToVueJS)
 99 | app.mount('#app')
100 | ```
101 | Third, pass permissions from Laravel To Vuejs, in HTML header add this code:
102 | ```html
103 | <script type="text/javascript">
104 |     window.Laravel = {
105 |         csrfToken: "{{ csrf_token() }}",
106 |         jsPermissions: {!! auth()->check()?auth()->user()->jsPermissions():0 !!}
107 |     }
108 | </script>
109 | ```
110 | 
111 | If you need to update roles and permission or reload user authintaction after switch user without reload the application, You can use reloadRolesAndPermissions() function
112 | ```html
113 | // in component
114 | <script>
115 |     import { reloadRolesAndPermissions } from 'laravel-permission-to-vuejs'
116 | 
117 |     // after your event call reloadRolesAndPermissions() function
118 |     reloadRolesAndPermissions()
119 | </script>
120 | ```
121 | ## License
122 | 
123 | The MIT License (MIT).


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
 1 | class LaravelPermissionToVue
 2 | {
 3 | 	is = function(value){
 4 |   		if(window.Laravel.jsPermissions == 0) return false
 5 | 		let roles = window.Laravel.jsPermissions.roles
 6 | 		let _return = false
 7 | 		if(!Array.isArray(roles)){
 8 | 			return false
 9 | 		}
10 | 		if(value.includes('|')){
11 | 			value.split('|').forEach(function (item) {
12 | 				if(roles.includes(item.trim())){
13 | 					_return = true
14 | 				}
15 | 			})
16 | 		}else if(value.includes('&')){
17 | 			_return = true
18 | 			value.split('&').forEach(function (item) {
19 | 				if(!roles.includes(item.trim())){
20 | 					_return = false
21 | 				}
22 | 			})
23 | 		}else{
24 | 			_return = roles.includes(value.trim())
25 | 		}
26 | 		return _return
27 | 	}
28 | 
29 | 	can = function(value){
30 |   		if(window.Laravel.jsPermissions == 0) return false
31 | 		let permissions = window.Laravel.jsPermissions.permissions
32 | 		let _return = false
33 | 		if(!Array.isArray(permissions)){
34 | 			return false
35 | 		}
36 | 		if(value.includes('|')){
37 | 			value.split('|').forEach(function (item) {
38 | 				if(permissions.includes(item.trim())){
39 | 					_return = true
40 | 				}
41 | 			})
42 | 		}else if(value.includes('&')){
43 | 			_return = true
44 | 			value.split('&').forEach(function (item) {
45 | 				if(!permissions.includes(item.trim())){
46 | 					_return = false
47 | 				}
48 | 			})
49 | 		}else{
50 | 			_return = permissions.includes(value.trim())
51 | 		}
52 | 		return _return
53 | 	}
54 | 
55 | 	reloadRolesAndPermissions = async function(route = '/get-laravel-permission-to-vuejs'){
56 | 		await axios.get(route).then(
57 | 		  response => {
58 | 		    window.Laravel.jsPermissions = response.data
59 | 		  }
60 | 		)
61 | 	}
62 | }
63 | 
64 | let lp = new LaravelPermissionToVue()
65 | 
66 | export default {
67 |   install: (app, options) => {
68 | 	  app.config.globalProperties.can = lp.can
69 | 	  app.config.globalProperties.is = lp.is
70 |   }
71 | }
72 | 
73 | const is = lp.is
74 | const can = lp.can
75 | const reloadRolesAndPermissions = lp.reloadRolesAndPermissions
76 | export {is, can, reloadRolesAndPermissions}
77 | 
78 | //// Ensure window.Laravel.jsPermissions is defined with a default value
79 | window.Laravel = window.Laravel || {}
80 | window.Laravel.jsPermissions = window.Laravel.jsPermissions || { permissions: [], roles: [] }
81 | 


--------------------------------------------------------------------------------
/src/js/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "laravel-permission-to-vuejs",
 3 |   "version": "3.0.8",
 4 |   "description": "Laravel Permission Package To Use it in VueJs",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "exports": {
10 |     ".": "./index.js"
11 |   },
12 |   "keywords":[
13 | 	"Laravel",
14 | 	"Laravel-permission",
15 | 	"Vuejs",
16 | 	"Vuejs permission",
17 | 	"Laravel permission to VueJs"
18 |   ],
19 |   "author": "ahmedsaoud31@gmail.com",
20 |   "license": "MIT"
21 | }
22 | 


--------------------------------------------------------------------------------