vue-jwt-auth

vue-jwt-auth

Jwt Auth library for Vue.js.

NOTE: You must load the vue-resource and vue-router modules before the vue-auth module due to dependencies.

Usage

Directly:

import Auth from './plugins/vue-jwt-auth.js';
Vue.use(Auth, options);

Via npm:

Vue.use(require('vue-jwt-auth'), {
    rolesVar: 'type'
});

NOTE: If you do not set your router as Vue.router = new VueRouter() then you will need to feed the router in directly as an optional third argument.

var router = new VueRouter();
Vue.use(Auth, options, router);

Loading

The ready() method can then be used to check when the user is first loaded.

<template>
    <div v-if="$auth.ready()">
        <ul>
            <li v-if="$auth.check()">Account</li>
            <li v-if="!$auth.check()">Login</li>
        </ul>

        <router-view></router-view>
    </div>

    <div v-if="!$auth.ready()">
        Site is loading...
    </div>
</template>

NOTE: This pre-fetch of the user would only occur once on the initial load of the site.

NOTE: This will all happen automatically once the package is included. Only the end points for the API will need to be changed which are described in the options section below.

Privileges

The vue-jwt-auth plugin works with the vue-router plugin. Setting an auth field in the router mapping section will set access to that route.

Vue.router.map({
    '/admin': {
        auth: 'admin',
        component: require('./Admin')
    },
    '/manage': {
        auth: ['admin', 'manager'],
        component: require('./Manage')
    },
    '/account': {
        auth: true,
        component: require('./Account')
    },
    '/login': {
        auth: false,
        component: require('./Login')
    },
    '/contact': {
        component: require('./Contact')
    }
});

Routes

**true**

User must be authenticated (no roles are checked).

**false**

If the user is logged in then this route will be unavailable. Useful for login/register type pages to be unaccessible once the user is logged in.

**undefined**

Public, no checks required.

**Array** or **String**

The user must be logged in. Additionally the string or array will be checked against the users roles.

Note that the users roles variable can be set in the options.

Methods

**ready()**

When the app boots the vue-jwt-auth plugin will fire off a check for a token and subsequent user fetch. In the first instance of this the app will be set to "ready".

This will only occur once when the browser is loaded or refreshed.

**check()**

Check if the user is logged in. It can also be used to check if the user has a specific role.

$auth.check();
$auth.check('admin');
$auth.check(['admin', 'sub-admin']);

**user()**

Fetch the user object stored in the $auth instance.

**login()**

Login the user which accepts four parameters.

this.$auth.login(data, rememberMe, redirectURL, {
    success: function () {
        console.log('success');
    },
    error: function () {
        console.log('error');
    }
});

• data - Any data to pass on for logging in.
• rememberMe - Should remember the user or not.
• redirectUrl - Which route to redirect to after successful login.
• options - The success and error callbacks can be set.

**facebook()** **google()**

These follows the same format as the $auth.login() method.

However the data for these works a bit differently. All the options for social authentication can be set in the options however they can also be set directly here in the data variable.

• appId - Set the social appId.
• scope - Scope of permissions required.
• redirect - Set the redirect url.
• state - Any additional state fields which will be passed back to the app.
• code - Pass the code in to verify with the api. This will automatically fire when the code field is detected.

var data = {
    appId: '11111111111111111',
    scope: 'email'
};

this.auth.facebook(data, true, '/account');

var data = {
    code: this.$route.query.code
};

var callbacks = {
    success: function () {},
    error: function () {}
};

this.auth.facebook(data, null, null, callbacks);

**logout()**

Log the user out.

Also accepts a redirect option and force redirect option.

Only redirects if on an auth required page.

this.$auth.logout('/home');

Always redirects.

this.$auth.logout('/home/', true);

**loginAs(data, redirectUrl, options)**

Login as another user.

**logoutAs(redirectUrl)**

Logout or other user. Will revert to previously logged in user.

**other()**

Check if we are currently logged in as another user.

Options

NOTE: All the ur's here are relative. It is assumed the vue app will have some scheme for auto pre-pending the full path to the routes.

**authType**

default: 'bearer'

Set the auth type. Only bearer is supported at this time.

**fetchUrl**

default: '/auth/user'

The url for fetching the user from the api.

**tokenUrl**

default: '/auth/token'

The url for fetching a new token from the api.

**loginUrl**

default: '/auth/login'

The url for logging in.

**registerUrl**

default: '/auth/register'

Url method for registering a user.

**loginRedirect**

default: '/login'

Redirect to this url if the user does not have authorization to the route.

**notFoundRedirect**

default: '/404'

Redirect to this url if the route is not accessible (this is in the case of setting a route to false). It will not handle 404 redirects for the entire app.

**forbiddenRedirect**

default: '/403'

Redirect to this url if the user does not have access to the route.

**rolesVar**

default: 'roles'

The name of the field that contains the roles in the user object returned from the api.

**tokenVar**

default: 'token'

The name of the field that contains the token returned from the api.

**tokenName**

default: 'jwt-auth-token'

The name of the token stored in local storage.

**cookieDomain**

default: _cookieDomain

The domain to use for the cookie. This method can be overridden.

**userData**

default: _userData

Locally this will simply return data on the response object. The local method can be overridden.

**beforeEach**

default: _beforeEach

This method runs before each request and handles the logic for permissions to a route. If another scheme is needed it can be overridden.

**facebookUrl**

default: '/auth/facebook'

The url for processing the Facebook token code in the api.

**facebookAppId**

default: ''

Set the Facebook client app id.

**facebookScope**

default: 'email'

Set the permissions scope required for the app from Facebook.

**facebookRedirect**

default: _getUrl() + '/login/facebook'

Set the redirect url to return to your app after oauth.

**googleUrl**

default: '/auth/google'

The url for processing the Google token code in the api.

**googleAppId**

default: ''

Set the Google client app id.

**googleScope**

default: 'https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read'

Set the permissions scope required for the app from Google.

**googleRedirect**

default: _getUrl() + '/login/google'

Set the redirect url to return to your app after oauth.