baseui/src/main.js

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';
import LoginForm from './components/forms/login.vue';
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: {
    setAPI(state, payload) {
      state.api = payload;
    },
    setNavigation(state, payload) {
      for (var i=0; i<payload.length; i++) {
        state.navigation.push(payload[i]); // = payload;
      }
    },
    setCredentials(state, payload) {
      state.credentials = {
        username: payload.username,
        password: payload.password
      }
    },
    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) {
      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
        
        // 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) {
      return new Promise((resolve, reject) => {
        context.dispatch('apiRequest', {
          method: 'post',
          endpoint: 'login',
          data: payload
        })
          .then(data => {
            context.commit('setCredentials', payload);
            context.commit('setLogin', data);
            resolve(data.User);
          })
          .catch(error => {
              if (error.response && error.response.data && error.response.data.error) {
                reject(error.response.data.error);
              } else {
                reject([]);
              }
          });
      });
    }
  }
});

// load init
Axios.get('conf/init.json')
    .then(results => {
        // set navigation
        if ( !Array.isArray(results.data.navigation) ) {
            alert('invalid data in: ' + this.src);
            return;
        }
        store.commit("setNavigation", results.data.navigation);

        // set api config in store
        store.commit("setAPI", results.data.api);

        // load app, when init finishs
        new Vue({
          el: '#vue-app',
          components: {
            App
          },
          data: {
            navItems: store.state.navigation
          },
          router,
          store
        });
    })
    .catch(error => {
        alert('error loading: ' + error.message);
    });