Vue Auth / Recipes / How To Setup Privileges

A common question that comes up is with privileges.

In some apps we may have two ways of controlling access to things. The typical case is to have some role access such as admin, manager, user. We occasionally also need privileges for fine tuned access within a page.

#Roles

Roles are usually used to more clearly section things off in an app. For instance we may have admin and user sections. If this is the case then the current vue-auth functionality should remain as is.

If for whatever reason we are using privileges to control access to pages then simply update the rolesKey to use that privilege attribute on the user.

#Privileges

If we want to fine tune logic within our page then we will need privileges along with roles. For instance we may want to show/hide buttons based on specific access.

For this we would use our check method with a second argument to specify the alternate user field to compare against.

<div v-if="$auth.check('admin')">
    admin stuff
</div>

<div v-if="$auth.check()">
    any authenticated user stuff
</div>

<div v-if="$auth.check({team: 'edit'}, 'priv')">
    some team edit stuff here.
</div>

#Extending Vue Auth

Because these are quite custom scenarios that are quite easy to extend if need be they are not included in the core plugin code. However, creating a little shortcut extension is simple enough.

import auth            from '@websanova/vue-auth';

auth.priv = function (role) {
    return auth.check(role, 'privileges');
}