Merge pull request #9 from tarikhamilton/#8-enable-interceptors-on-vue.$api

Add interceptor support to plugin instantiation

Author: kimuraz

docs/started.md

@@ -16,7 +16,9 @@ $ npm install vue-rest
 
 To add to your project, import it and the use `Vue.use(VueRest)` to properly use it.
 
-> Optionally you can add `axiosOptions` that is responsible for any options related to [axios]('https://github.com/mzabriskie/axios%29/')
+> Optionally you can add `axiosOptions` that is responsible for any options related to [axios]('https://github.com/mzabriskie/axios%29/').
+
+> You can also use `interceptors` to add interceptors alongside your config.
 
 ```js
 ...
@@ -26,6 +28,16 @@ import VueRest from 'vue-rest';
 Vue.use(VueRest, {
   axiosOptions: {
     baseURL: 'http://localhost/api/',
+  },
+  interceptors: {
+    responses: [
+      [fulfilled, rejected],
+      {
+        fulfilled,
+        rejected
+      }
+    ],
+    requests: []
   }
 });
 ```
@@ -52,4 +64,4 @@ export default {
   mixins: [ApiList]
   ...
 }
-```
+```

index.js

@@ -8,6 +8,33 @@ import axios from 'axios';
 import ApiForm from './mixins/ApiForm';
 import ApiList from './mixins/ApiList';
 
+function addInterceptors(interceptors, api) {
+  const {
+    requests: requestInterceptors,
+    responses: responseInterceptors,
+  } = interceptors;
+  if (requestInterceptors) {
+    requestInterceptors.forEach((interceptor) => {
+      if (Array.isArray(interceptor)) {
+        api.interceptors.request.use(...interceptor);
+      } else {
+        const { fulfilled, rejected } = interceptor;
+        api.interceptors.request.use(fulfilled, rejected);
+      }
+    });
+  }
+  if (responseInterceptors) {
+    responseInterceptors.forEach((interceptor) => {
+      if (Array.isArray(interceptor)) {
+        api.interceptors.response.use(...interceptor);
+      } else {
+        const { fulfilled, rejected } = interceptor;
+        api.interceptors.response.use(fulfilled, rejected);
+      }
+    });
+  }
+}
+
 const VueRest = {
   install(Vue, options) {
     if (Vue.vueRestInstalled) {
@@ -19,16 +46,26 @@ const VueRest = {
     let api = null;
     if (options && options.axiosOptions) {
       api = axios.create(options.axiosOptions);
+      if (options.interceptors) {
+        addInterceptors(options.interceptors, api);
+      }
       if (options.axiosOptions.localStorageAuthorization) {
-        const localStorageAuthorization = options.axiosOptions.localStorageAuthorization;
+        const localStorageAuthorization =
+          options.axiosOptions.localStorageAuthorization;
         api.interceptors.request.use((config) => {
-          const token = localStorage.getItem(localStorageAuthorization.tokenItem);
+          const token = localStorage.getItem(
+            localStorageAuthorization.tokenItem,
+          );
           const prefix = localStorageAuthorization.prefix;
           if (!localStorageAuthorization.tokenItem || !prefix) {
-            console.error('[ERR - VueRest]: Miss configuration at localStorageAuthorization.');
+            console.error(
+              '[ERR - VueRest]: Miss configuration at localStorageAuthorization.',
+            );
           }
           if (token) {
-            Object.assign(config.headers, { Authorization: `${prefix} ${token}` });
+            Object.assign(config.headers, {
+              Authorization: `${prefix} ${token}`,
+            });
           }
           return config;
         });

test/unit/mixins/Install.spec.js

@@ -2,14 +2,37 @@ import Vue from 'vue';
 import VueRest from '../../../index.js';
 
 describe('Testing install function', () => {
+  const interceptor1 = [config => config, error => Promise.reject(error)];
+  const interceptor2 = [request => request, error => Promise.reject(error)];
+  const interceptor3 = {
+    fulfilled: config => config,
+    rejected: error => Promise.reject(error),
+  };
+  const interceptor1AsObj = {
+    fulfilled: interceptor1[0],
+    rejected: interceptor1[1],
+  };
 
   Vue.use(VueRest, {
     axiosOptions: {
       baseURL: 'http://localhost:8000',
     },
+    interceptors: {
+      requests: [interceptor1, interceptor2, interceptor3],
+      responses: [interceptor3],
+    },
   });
 
   test('Should apply axios settings when axiosOptions is set', () => {
     expect(Vue.api.defaults.baseURL).toBe('http://localhost:8000');
-  }); 
+  });
+
+  test('can receive interceptors from axiosOptions', () => {
+    expect(Vue.api.interceptors.request.handlers).toEqual(
+      expect.arrayContaining([interceptor1AsObj, interceptor3]),
+    );
+    expect(Vue.api.interceptors.response.handlers).toEqual(
+      expect.arrayContaining([interceptor3]),
+    );
+  });
 });