How I expose Laravel permissions in Vue.js

Imagine you want in Vue.js to do something like:

<h1 v-if="Laravel.user.can['manage users']">You have permission to manage users</h1>
<h1 v-else>You dont have permission to manage users</h1>

So you want to use Laravel permissions (server side) in Vue.js (frontend/client side)… Here is a little guide of how I expose Laravel permissions (https://laravel.com/docs/5.4/authorization) to vue.js using amazing Laravel permission package ( https://github.com/spatie/laravel-permission).

Configuration on backend

https://github.com/spatie/laravel-permission#installation.

Add Laravel user object to Javascript with the following Javascript snippet in your html header, multiple ways of doing this:

Before Laravel 5.4.23 a window.Laravel global javascript object exists, you could add user to this object using:

<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
'user' => Auth::user()
]) !!};
</script>

Or Like in 5.4.23 and before you can use meta tags:

<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="user" content="Auth::user()">

and in bootstrap.js or similar file done something like:

let user = document.head.querySelector('meta[name="user"]');

If you use Laravel default Laravel scaffolding (see command make:auth https://laravel.com/docs/5.4/authentication#introduction) you have to only done litle changes tho the existing files.

You can also publish only permissions and/or roles if you don’t want to expose all user object to javascript with something like:

<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
'roles' => Auth::user()->roles
]) !!};
</script

Laravep permission package don’t expose by default roles and permissions in Json serialization of user object so you have to apply the following changes to App\User class (apply a Trait):

Trait ExposePermissions
....


/**
* Get all user permissions.
*
* @return bool
*/
public function getAllPermissionsAttribute()
{
return $this->getAllPermissions();
}

/**
* Get all user permissions in a flat array.
*
* @return array
*/
public function getCanAttribute()
{
$permissions = [];
foreach (Permission::all() as $permission) {
if (Auth::user()->can($permission->name)) {
$permissions[$permission->name] = true;
} else {
$permissions[$permission->name] = false;
}
}
return $permissions;
}

At the trait to you User Model and appends the attributes to json:

/**
* The accessors to append to the model's array form.
*
* @var array
*/
protected $appends = ['all_permissions','can']

Front-end

<h1 v-if="Laravel.user.can['manage users']">You have permission to manage users</h1>
<h1 v-else>You dont have permission to manage users</h1>

Or if you have been published a user javascript global object:

<h1 v-if="user.can['manage users']">You have permission to manage users</h1>
<h1 v-else>You dont have permission to manage users</h1>

Security note

Some notes and code can be found here:

Computer Science Teacher and Open Source contributor in my free time. Creator of adminlte-laravel.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store