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 Views from './views/views.js';

Vue.use(VueRouter);
Vue.use(Vuex);

const router = new VueRouter();

const store = new Vuex.Store({
  state: {
    api: {},
    navigation: [],
    persist: {
      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.persist.credentials = {
        username: payload.username,
        password: payload.password
      };
      objectToPersist(state.persist, 'persistantStore');
    },
    setLogin(state, payload) {
      state.persist.login = payload.User;
      state.persist.authToken = payload.AuthToken;
      state.persist.jwt = JwtDecode(payload.AuthToken);
      objectToPersist(state.persist, 'persistantStore');
    },
    clearLogin(state) {
      state.persist.login = {};
      state.persist.authToken = '';
      state.persist.jwt = {};
      state.persist.credentials = {};
      objectToPersist(state.persist, 'persistantStore');
    }
  },
  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.persist.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.persist.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.persist.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.persist.jwt.exp - 60) < now) {
          // jwt near expire, get new one
          console.log("getting new jwt");

          return context.dispatch('login', context.state.persist.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([]);
            }
          });
      });
    }
  }
});

function objectToPersist(obj, key) {
  try {
    const serialized = JSON.stringify(obj);
    localStorage.setItem(key ? key : 'persistant', serialized);
  } catch (error) {
    console.error(error);
  }
};

function persistToObject(key) {
  try {
    const serialized = localStorage.getItem(key ? key : 'persistant');
    if (serialized === null) {
      return undefined;
    }
    return JSON.parse(serialized);
  } catch (error) {
    console.log(error);
    return undefined;
  }
}

// get store persist part from localStorage
let persist = persistToObject('persistantStore');
if (persist) {
  store.state.persist = persist;
}

// load init
Axios.get('conf/init.json')
  .then(results => {
    // set navigation
    if (!Array.isArray(results.data.navigation)) {
      alert('invalid data in init.json');
      return;
    }
    const navigation = results.data.navigation.map(({name, to, icon, show}) => {return {name, to, icon, show}});

    store.commit("setNavigation", navigation);

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

    // add routes
    let routes = [];
    let rIdx = 0;
    results.data.navigation.forEach(({name, to, content, data}) => routes.push({
      name: name,
      path: to,
      meta: {
        title: name
      },
      component: Vue.component(name + rIdx++, {
        template: '<div id="' + name + rIdx + '">' + content + '</div>',
        components: Views,
        data: function(data) {
          if (typeof data != 'object') {
            return () => { return {}; };
          }
          return () => { return data; };
        }(data)
      })
    }));
    router.addRoutes(routes);
    router.beforeEach((to, from, next) => {
      console.log(to);
      document.title = (to.meta && to.meta.title) ? results.data.title + ': ' + to.meta.title : results.data.title;
      next();
    });

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