Vue Auth / Guides / Drivers

The plugin is made to re-use and integrate with existing vue plugins as much as possible.

For this reason it ships with a driver model which includes four driver types.

#Setup

A typical setup might look like the following.

import auth            from '@websanova/vue-auth';
import authBasic       from '@websanova/vue-auth/drivers/auth/basic.js';
import httpVueResource from '@websanova/vue-auth/drivers/http/vue-resource.1.x.js';
import routerVueRouter from '@websanova/vue-auth/drivers/router/vue-router.2.x.js';
import oauth2Google    from '@websanova/vue-auth/drivers/oauth2/google.js';
import oauth2Facebook  from '@websanova/vue-auth/drivers/oauth2/facebook.js';

oauth2Google.params.client_id = 'GOOGLE-OAUTH2-CLIENT-ID';
oauth2Facebook.params.client_id = 'FACEBOOK-CLIENT-ID';

Vue.use(auth, {
    auth: authBasic,
    http: httpVueResource,
    router: routerVueRouter,
    oauth2: {
        google: oauth2Google,
        facebook: oauth2Facebook,
    }
});

#Auth Drivers

This driver is used to parse a token from a response and format a token for a request.

In it you will find the two functions aptly named request and response.

For instance, if we take the simplest case of the basic.js driver, we can see it's simply setting and returning a token with no other modifications.

#Available Drivers

• basic.js
• bearer.js
• devise.js

#HTTP Drivers

This driver has three main purposes.

#1. Make HTTP requests to our API.

There is no need to add additional code for something that already exists and works well. So we will piggy back off our existing favorite HTTP libraries such as vue-resource and axios.

It's important to note that all methods using the HTTP driver pass the parameters directly through. For instance if using the Axios library it should pass the data parameter instead of the body parameter.

// Vue Resource
this.$login({
    body: {
        email: '[email protected]',
        password: 'testtest'
    }
    ...
});

// Axios
this.$register({
    data: {
        email: '[email protected]',
        password: 'testtest'
    }
    ...
});

#2. Intercept requests and responses.

We need a way to make sure our token is sent with each request if set. Likewise we also need to sniff out any new token in the response from our API during login or impersonate requests. Any descent existing plugin should already support this and allow us to easily create these intercepts.

These intercepts are directly fed into the auth drivers. So for instance a response intercept gets triggered which then calls the response auth driver function. Same applies to requests.

#3. Perform some header and response parsing.

Other than the above, the driver will perform some basic parsing based on it's format. This is to ensure that the format returned to the vue-auth plugin is consistent.

#Available Drivers:

• axios.1.x.js
• vue-resource.1.x.js

#Router Drivers

These drivers are used to check and redirect routes based on a users authentication and roles.

This driver is a bit more complicated to customize as it is heavily integrated with the plugin it uses.

#Available Drivers:

• vue-router.2.x.js

#OAuth2 Drivers

These drivers are used to make an OAuth2 request to their respective services.

To customize these requires only setting a url and default OAuth2 parameters.

#Available Drivers:

• facebook.js
• google.js

#Custom Drivers

The best way to customize a driver is to simply look at the source code on GitHub of one of the existing ones. From there an existing one can be copied and modified to suit particular needs for the application.

The drivers will heavily integrate with the particular plugin they interact with. For instance if using the vue-resource plugin it will directly affect the http and auth drivers. For this reason, we will not go into specific details on how to customize each driver.