How I expose Laravel permissions in Vue.js

Sergi Tur Badenas
May 22, 2017 · 2 min read

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

Install laravel-permission package. See:

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

We want to use Laravel permission package roles and permissions in Javascript with Conditional rendering (https://vuejs.org/v2/guide/conditional.html) using the following:

<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

Never depends only in Javascript for security because Javascript code could be tampered by final users. So only use this technique when you also use backend security.

Some notes and code can be found here:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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