diff --git a/package-lock.json b/package-lock.json index cf70999..3d8a33b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3529,6 +3529,11 @@ "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=", "dev": true }, + "jwt-decode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz", + "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk=" + }, "kind-of": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", diff --git a/package.json b/package.json index 06dd2f8..b3b0a56 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "axios": "^0.16.2", "babel-polyfill": "^6.26.0", "intersection-observer": "^0.4.0", + "jwt-decode": "^2.2.0", "vue": "^2.4.2", "vue-observe-visibility": "^0.1.3", "vue-router": "^2.7.0", diff --git a/src/components/forms/login.vue b/src/components/forms/login.vue index b3afeb8..df3803a 100644 --- a/src/components/forms/login.vue +++ b/src/components/forms/login.vue @@ -26,6 +26,7 @@ export default { .then(user => { console.log("---- user login --------"); console.log(user); + this.$router.go(-1); }) .catch(error => { console.log("---- login error -------"); diff --git a/src/main.js b/src/main.js index 9f97033..44a4132 100644 --- a/src/main.js +++ b/src/main.js @@ -2,6 +2,7 @@ import Vue from 'vue'; import Vuex from 'vuex'; import VueRouter from 'vue-router'; import Axios from 'axios'; +import JwtDecode from 'jwt-decode'; import App from './app.vue'; import Dashboard from './components/dashboard.vue'; @@ -11,12 +12,33 @@ import Userlist from './components/userlist.vue'; Vue.use(VueRouter); Vue.use(Vuex); + +const routes = [ + { + path: '/login', + component: LoginForm + }, + { + path: '/', + component: Dashboard + }, + { + path: '/userlist', + component: Userlist + } +]; + +const router = new VueRouter({ + routes +}); + const store = new Vuex.Store({ state: { api: {}, navigation: [], login: {}, authToken: '', + jwt: {}, credentials: {} }, mutations: { @@ -37,34 +59,79 @@ const store = new Vuex.Store({ setLogin(state, payload) { state.login = payload.User; state.authToken = payload.AuthToken; + state.jwt = JwtDecode(payload.AuthToken); + }, + clearLogin() { + state.login = {}; + state.authToken = ''; + state.jwt = {}; } }, actions: { apiRequest(context, payload) { - return new Promise((resolve, reject) => { + let doRequest = () => { + return new Promise((resolve, reject) => { + Axios({ + method: payload.method ? payload.method : 'get', + baseURL: context.state.api.baseURL, + url: payload.endpoint, + params: payload.params, + data: payload.data, + headers: { + 'X-Auth-Token': context.state.authToken + } + }) + .then(response => { + console.log(response); + resolve(response.data); + }) + .catch(error => { + console.dir(error); + reject(error); + }) + }); + }; + + if (payload.endpoint != 'login') { + // no jwt check for login call - Axios({ - method: payload.method ? payload.method : 'get', - baseURL: context.state.api.baseURL, - url: payload.endpoint, - params: payload.params, - data: payload.data, - headers: { - 'X-Auth-Token': context.state.authToken - } - }) - .then(response => { - console.log(response); - resolve(response.data); - }) - .catch(error => { - console.dir(error); - reject(error); - }) - }); + // empty username = not logged in + if (!context.state.credentials.username) { + return new Promise((resolve, reject) => { + // show login page + router.push('/login'); + reject(['not logged in']); + }); + } + + let now = Math.round(Date.now() / 1000); + if ( context.state.jwt.exp < (now + 300) ) { + // too old jwt, logout + return new Promise((resolve, reject) => { + context.commit('clearLogin'); + router.push('/login'); + reject(['jwt too old, logout']); + }); + } + + if ( (context.state.jwt.exp - 60) < now ) { + // jwt near expire, get new one + console.log("getting new jwt"); + + return context.dispatch('login', context.state.credentials) + .then(() => { + console.log("LOOOGIIIINNN"); + return doRequest(); + }) + .catch(error => { + throw error; + }) + } + } + + return doRequest(); }, login(context, payload) { - context.commit('setCredentials', payload); return new Promise((resolve, reject) => { context.dispatch('apiRequest', { method: 'post', @@ -72,6 +139,7 @@ const store = new Vuex.Store({ data: payload }) .then(data => { + context.commit('setCredentials', payload); context.commit('setLogin', data); resolve(data.User); }) @@ -87,26 +155,6 @@ const store = new Vuex.Store({ } }); - -const routes = [ - { - path: '/login', - component: LoginForm - }, - { - path: '/', - component: Dashboard - }, - { - path: '/userlist', - component: Userlist - } -]; - -const router = new VueRouter({ - routes -}); - // load init Axios.get('conf/init.json') .then(results => {