---

---

Vuex Passport

Prolouge

This repo is forked from vandcarlos/vuex-passport. I’d like to speed up a little bit since he took it somewhere nice.

Intentions :

• Keep it simple, yet effective
• Build as a component,

When/why you need:

• If you eager to use Laravel Passport instead of jwt-auth
• Tired of trying to implement intentionaly large Vue auth modules to your applications.

Important:

• This module relies on vuex-persistedstate to keep auth data persisted on store. You should check it how to install/use because you can’t see it in this repo.
• Also I’ve used axios by default to communicate.

Installation

Just do the trick. You know the npm i -S drill.

Usage

For simple use import this module and use in store/index.js

Enhancements with vuex-persistedstate, vue-router and so on…

import Vue from 'vue'
import Vuex from 'vuex'
import auth from 'vuex-passport'
Vue.use(Vuex);
const store = new Vuex.Store({ 
	modules: { 
		auth
	}
});
export default store;

Route interceptor

if you need intercept guarded routes you can import a RouteShielding, eg.:

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import { RouteShielding } from 'vuex-passport'
 import routes from './routes'
 Vue.use(VueRouter);
 const Router = new VueRouter({ routes });
 const authLoginRedirect = 'oauth/token', // used when user try to access a guarded route
     authDashboardRedirect = 'dashboard'; // used when user try to access authLoginRedirect route
 Router.beforeEach(RouteShielding(authLoginRedirect, authDashboardRedirect));
 export default Router;

and in your routes you need simply add a meta { guarded: true }, eg.:

const Router = new Router({  
	routes: [  
	{  
		path: '/welcome',
		redirect: { name: 'welcome' },
		component: require('./components/Welcome.vue'),  
		meta: { guarded: false }
	},  
	{  
		path: '/dashboard',  
		name: 'dashboard',  
		component: require('./components/Dashboard.vue'),  
		meta: { guarded: true }
	},  
	{  
		path: '/some-unauthorised-place',  
		name: 'foo',  
		component: require('./components/Foo.vue'),  
		meta: { guarded: false }  
	},  
	{  
		path: '/auth',  
		component: require('./components/auth/Auth.vue'),  
		meta: { guarded: false },  
		name: 'auth',  
		children: [  
			{  
				path: 'login',  
				component: require('./components/auth/Login.vue'),  
				meta: { guarded: false },  
			},  
			{  
				path: 'register',  
				component: require('./components/auth/Register.vue'),  
				meta: { guarded: false },  
			},  
			{  
				path: 'reset',  
				component: require('./components/auth/PasswordReset.vue'),  
				meta: { guarded: false },  
			}]  
	}]
});

Note: You will can add meta tag in parent or children

Finally if you need change the default login page for redirect or the index page if user access login page when has section you can call a RouteShielding with the names for these pages

Router.beforeEach(RouteShielding('foo-login', 'bar-index'))  

IMPORTANT the RouteShielding use the property name of routes

Written with StackEdit.