Accessing User roles from Vue in an SPA

To clarify, I'd like to be able to use this in a way similar to the @can blade directive and its relatives.

You can make an API from your back-end where it lists all the available role+permissions that are applicable to authenticated user. From there, make a javascript helper.

From Laravel, do something like this...

// For permissions:
return Response::json(Auth::user()->perms->pluck('name'));

// For roles:
return Response::json(Auth::user()->roles->pluck('name'));

Javascript

// Populate these array with the response from your API.
var roles = [];
var permissions = [];

Here's a snippet for checking whether an item is in array. [Ref: http://stackoverflow.com/questions/143847/best-way-to-find-if-an-item-is-in-a-javascript-array ]

function array_has (arr, obj) {
    return (arr.indexOf (obj) != -1);
}

Create the object where the logic for determining if the authenticated user has the role/permission.

var Auth = {
    is = function(role) {
        return array_has(roles, role);
    },

    can = function (permission) {
        return array_has(permissions, permission);
    }
}

Now to check whether the user can write-post

if (Auth.can('write-post') { /* ,., */}

And to verify a user has a role...

if (Auth.is('manager')) { /* ,., */ }

Thanks to @silverxjohn for leading me in the right direction.

What I ended up doing was adding a roles array in the window.Laravel section in my blade layout. Then, I could set that to this: {!! Auth::user()->roles->pluck('name') !!}, and finally put the code below in my bootstrap js file to give me Auth.is('role') capabilities.

window.Auth = {
    is(role) {
        return (Laravel.user.roles.indexOf (role) != -1);
    }
}

Perhaps this isn't the best solution, but it worked for me.

I personally when a user logs in return json with auth token and required data, such as name and roles etc..

Then you have access to said data. But always double check on requests to ensure truthlyness of requests if a role is required. Via middleware.

Consider this scenario:

<p v-if="Auth.is('admin')">This is a very sensitive info and only the admin is meant to see it </p>
<p v-else> You are not an admin </p>

What if a user opens up the console and runs Laravel.user.roles.push('admin')?

How did/would you tackle that?

@tanmay_das You need to verify roles and permissions on server side in request also.