refactor(http-service): set store from outside to prevent circular de…

…ps (#169) closes #164
vuesion · Jun 18, 2018 · 374f17f · 374f17f
1 parent a66dfff
commit 374f17f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/src/app/app.ts b/src/app/app.ts
@@ -1,14 +1,15 @@
-import Vue           from 'vue';
-import VueI18n       from 'vue-i18n';
-import VeeValidate   from 'vee-validate';
-import { Store }     from 'vuex';
-import { sync }      from 'vuex-router-sync';
-import { VueRouter } from 'vue-router/types/router';
-import { i18n }      from './shared/plugins/i18n/i18n';
-import { store }     from './store';
-import { router }    from './router';
-import { IState }    from './state';
-import App           from './app/App/App.vue';
+import Vue             from 'vue';
+import VueI18n         from 'vue-i18n';
+import VeeValidate     from 'vee-validate';
+import { Store }       from 'vuex';
+import { sync }        from 'vuex-router-sync';
+import { VueRouter }   from 'vue-router/types/router';
+import { i18n }        from './shared/plugins/i18n/i18n';
+import { store }       from './store';
+import { router }      from './router';
+import { IState }      from './state';
+import App             from './app/App/App.vue';
+import { HttpService } from './shared/services/HttpService';
 
 Vue.use(VeeValidate, { inject: false });
 
@@ -21,6 +22,9 @@ export interface IApp {
 
 export const createApp = (): IApp => {
   sync(store, router);
+
+  HttpService.store = store;
+
   const app: Vue = new Vue(
     {
       router,

diff --git a/src/app/shared/services/HttpService.ts b/src/app/shared/services/HttpService.ts
@@ -1,14 +1,19 @@
-import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';
-import { store }                                                from '../../store';
+import axios, { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import { Store }                                                               from 'vuex';
+import { IState }                                                              from '../../state';
 
-export const HttpService = axios.create();
+export interface IHttpService extends AxiosInstance {
+  store?: Store<IState>;
+}
+
+export const HttpService: IHttpService = axios.create();
 
 /* istanbul ignore next */
 HttpService.interceptors.request.use(
   (config: AxiosRequestConfig) => {
-    // TODO: get token from store e.g. const token: string = store.state.auth.accessToken;
+    // TODO: get token from HttpService.store e.g. const token: string = HttpService.store.state.auth.accessToken;
     const token: string = '';
-    const baseUrl: string = store.state.app.config ? store.state.app.config.api.baseUrl : '';
+    const baseUrl: string = HttpService.store && HttpService.store.state.app.config ? HttpService.store.state.app.config.api.baseUrl : '';
     const isExternal: boolean = config.url.indexOf('://') > -1 && config.url.indexOf('i18n') === -1;
 
     if (token && !isExternal && !config.headers.Authorization) {
@@ -35,7 +40,7 @@ HttpService.interceptors.response.use(
     const originalRequest: any = error.config;
     /**
      * TODO: add condition for refreshing the token
-     * const shouldRefresh: boolean = store.state.auth.accessToken !== null &&
+     * const shouldRefresh: boolean = HttpService.store.state.auth.accessToken !== null &&
      * (error.response.status === 401 || error.response.status === 403) &&
      * !originalRequest._retry;
      */
@@ -47,10 +52,10 @@ HttpService.interceptors.response.use(
 
       /**
        * TODO: return function that refreshes the token
-       * return store.dispatch('refreshToken')
+       * return HttpService.store.dispatch('refreshToken')
        * .then(() => {
        *     if (originalRequest.headers.Authorization && originalRequest.headers.Authorization.indexOf('Bearer') > -1) {
-       *       originalRequest.headers.Authorization = `Bearer ${store.state.auth.accessToken}`;
+       *       originalRequest.headers.Authorization = `Bearer ${HttpService.store.state.auth.accessToken}`;
        *     }
        *
        *     return Promise.resolve(HttpService(originalRequest));