1. Vue-Yokozuna

This is the implementation of ng-yokozuna for Mujeres 2.0, and respects all functionality of it. Same token handling, routing, control displaying of elements and HTTP requests interceptions, but Vue flavorized

• 1. Vue-Yokozuna
• 2. Installation
• 3. Security
  • 3.1. Directives
  • 3.2. Events
  • 3.3. Login Route
  • 3.4. Secure Routes
• 4. Login mode

2. Installation

npm install git+ssh://[email protected]:yokozuna/v-yokozuna.git

For register this plugin in your project, in your import file just add the next code

import Vue from 'vue';
import VueYokozuna from 'v-yokozuna';

Vue.use(VueYokozuna);

3. Security

For store your access token, in your Vue component just call this.$yokozuna.setToken

api.login().then(token => {
    this.$yokozuna.setToken(token);
});

For retrieve your auth token, just call this.$yokozuna.getToken

    // In a component
    ...
        computed: {
            isLogged() {
                return this.$yokozuna.getToken();
            }
        }
    ...

VueYokozuna provides an automatized interceptor of VueResource and axios for add your token to any requets.

Just add authentication property to your configuration request

//VueResource
Vue.http.get(url, {authentication: 'yokozuna'});

//axios
axios.get(url, {authentication: 'yokozuna'});

You must add VueResource or axios to your project

For VueResource

import VueResource from 'vue-resource';
import Vue from 'Vue'
Vue.use(VueResource);

For axios

import Vue from 'vue';
import VueYokozuna from 'v-yokozuna';
import axios from 'axios';

Vue.use(VueYokozuna, {loginRoute: '[routeName]', httpClient: axios});

After this, VueYokozuna adds an Authorization header with your token when you pass a configuration object with a property named authentication settled as yokozuna

//VueResource
Vue.http.get(url, authentication);


//Axios
axios.get(url, {authentication: 'yokozuna'});

3.1. Directives

Vue-Yokozuna provides two directives to hide or show elements based on login status these directives are v-ykzn-logged and ykzn-not-logged, and one to show the name of the current user v-ykzn-current-user.

v-ykzn-logged shows elements when login status is true, and hides it whenever logged is false

<div v-ykzn-logged>
    VISIBLE WHEN USER IS LOGGED
<div>

ykzn-not-logged shows elements when login status is false, and hides it whenever logged is true.

<div v-ykzn-not-logged>
    VISIBLE WHEN USER IS NOT LOGGED
<div>

v-ykzn-current-user shows the current user name logged in the application

<span v-ykzn-current-user></span>

3.2. Events

To actualize states from directives you can emit the event yokozuna-logged. This event is listened by the directives ykzn-logged and ykzn-not-logged to hide or show its elements.

api.login().then(token => {
    this.$emit('yokozuna-logged')
});

3.3. Login Route

When a HTTP request is responded with a 401 status, you can set a route to redirect your users and request them to login into your application, for this just configure your login route with the property loginRoute.

import Vue from 'vue';
import VueYokozuna from 'v-yokozuna';

Vue.use(VueYokozuna, {loginRoute: '[routeName]'});

For this functionality you need to include vue-resource or axios http clients.

If you use vue-resourece this funcionality is configured automaticaly.

If you prefer to use axios you need to configure YokozunaPlugin like

import Vue from 'vue';
import VueYokozuna from 'v-yokozuna';
import axios from 'axios';

Vue.use(VueYokozuna, {loginRoute: '[routeName]', httpClient: axios});

If none is provided, sets login by default

3.4. Secure Routes

If you need to secure routes in your application you can add the meta property {authRequired: true} to your route in order to protect it against unlogged users.

Just configure your routes like this

Router.addRoutes([
    { 
        path: '/', 
        name: 'route', 
        component: 'component', 
        meta: {
            authRequired: true
        }
    }]);

4. Login mode

You can configure your login window mode, can be a entire window (redirects the app to the login route) or just a popup. Entire login window is configured by default, if you want to use 'popup' mode yous configure this plugin as:

import VueYokozuna from 'v-yokozuna';

Vue.use(VueYokozuna, 
    {
        mode: 'popup'
    }
);