Set global axios instance using vue-axios wrapper

package-lock.json

@@ -1464,9 +1464,9 @@
             }
         },
         "axios": {
-            "version": "0.19.1",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.1.tgz",
-            "integrity": "sha512-Yl+7nfreYKaLRvAvjNPkvfjnQHJM1yLBY3zhqAwcJSwR/6ETkanUgylgtIvkvz0xJ+p/vZuNw8X7Hnb7Whsbpw==",
+            "version": "0.19.2",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+            "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
             "dev": true,
             "requires": {
                 "follow-redirects": "1.5.10"
@@ -9146,6 +9146,11 @@
             "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==",
             "dev": true
         },
+        "vue-axios": {
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-2.1.5.tgz",
+            "integrity": "sha512-th5xVbInVoyIoe+qY+9GCflEVezxAvztD4xpFF39SRQYqpoKD2qkmX8yv08jJG9a2SgNOCjirjJGSwg/wTrbmA=="
+        },
         "vue-hot-reload-api": {
             "version": "2.3.4",
             "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -10,7 +10,7 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "axios": "^0.19.1",
+        "axios": "^0.19.2",
         "bootstrap": "^4.4.1",
         "bulma": "^0.8.0",
         "cross-env": "^5.2.1",
@@ -31,6 +31,7 @@
         "@fortawesome/free-solid-svg-icons": "^5.12.0",
         "@fortawesome/vue-fontawesome": "^0.1.9",
         "v-clipboard": "^2.2.2",
+        "vue-axios": "^2.1.5",
         "vue-i18n": "^8.15.3",
         "vue-router": "^3.1.3"
     }

resources/js/api.js

@@ -0,0 +1,46 @@
+import Vue      from 'vue'
+import axios    from 'axios'
+import VueAxios from 'vue-axios'
+import router   from './routes.js'
+
+Vue.use(VueAxios, axios)
+
+Vue.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+let token = document.head.querySelector('meta[name="csrf-token"]');
+
+if (token) {
+    Vue.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
+} else {
+    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
+}
+
+
+Vue.axios.interceptors.request.use(function (request) {
+
+    const authToken = localStorage.getItem('jwt')
+
+    if(authToken) {
+        request.headers.common['Authorization'] = 'Bearer ' + authToken
+    }
+
+    request.headers.common['Content-Type'] = 'application/json'
+
+    return request
+
+})
+
+Vue.axios.interceptors.response.use(response => response, error => {
+
+    if ( error.response.status === 404 ) {
+
+        router.push({name: '404', params: { err : error.response }})
+    }
+    else {
+
+        // router.push({ name: 'genericError', params: { err: error.response } });
+        return Promise.reject(error)
+    }
+
+
+})

resources/js/app.js

@@ -1,5 +1,6 @@
 import Vue          from 'vue'
 import router       from './routes'
+import api          from './api'
 import i18n         from './langs/i18n'
 import FontAwesome  from './packages/fontawesome'
 import Clipboard    from './packages/clipboard'

resources/js/bootstrap.js

@@ -23,6 +23,8 @@ window.axios = require('axios');
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
+import router       from './routes'
+
 /**
  * Next we will register the CSRF Token as a common header with Axios so that
  * all outgoing HTTP requests automatically have it attached. This is just
@@ -54,15 +56,10 @@ window.axios.interceptors.request.use(function (request) {
 
 window.axios.interceptors.response.use(response => response, error => {
 
-    const { status } = error.response
-
-    if (status >= 500) {
-        router.push({name: 'genericError', params: { err : error.response }})
-    }
+    if ( error.response.status === 404 ) { viewName = '404' }
+    if ( error.response.status >= 500 ) { viewName = 'genericError' }
 
-    // if (status === 404) {
-    //     router.push({name: '404'})
-    // }
+    router.push({name: viewName, params: { err : error.response }})
 
     return Promise.reject(error)
 })

resources/js/components/Form.js

@@ -1,5 +1,6 @@
+import Vue      from 'vue'
+import Errors   from './FormErrors'
 
-import Errors from './FormErrors'
 // import { deepCopy } from './util'
 
 class Form {
@@ -157,7 +158,7 @@ class Form {
 
         return new Promise((resolve, reject) => {
             // (Form.axios || axios).request({ url: this.route(url), method, data, ...config })
-            axios.request({ url: this.route(url), method, data, ...config })
+            Vue.axios.request({ url: this.route(url), method, data, ...config })
                 .then(response => {
                     this.finishProcessing()
 
@@ -188,7 +189,7 @@ class Form {
 
         return new Promise((resolve, reject) => {
             // (Form.axios || axios).request({ url: this.route(url), method, data, ...config })
-            axios.request({ url: this.route(url), method: 'post', data: formData, header: {'Content-Type' : 'multipart/form-data'} })
+            Vue.axios.request({ url: this.route(url), method: 'post', data: formData, header: {'Content-Type' : 'multipart/form-data'} })
                 .then(response => {
                     this.finishProcessing()
 

resources/js/components/TwofaccountShow.vue

@@ -37,7 +37,7 @@
 
                 this.id = id
 
-                axios.get('api/twofaccounts/' + this.id)
+                this.axios.get('api/twofaccounts/' + this.id)
                     .then(async (response) => {
 
                         this.service = response.data.service
@@ -55,7 +55,7 @@
 
             getTOTP: function() {
 
-                axios.get('api/twofaccounts/' + this.id + '/otp').then(response => {
+                this.axios.get('api/twofaccounts/' + this.id + '/otp').then(response => {
                     let spacePosition = Math.ceil(response.data.otp.length / 2);
                     
                     this.otp = response.data.otp.substr(0, spacePosition) + " " + response.data.otp.substr(spacePosition);
@@ -96,7 +96,7 @@
 
             getHOTP: function() {
 
-                axios.get('api/twofaccounts/' + this.id + '/otp').then(response => {
+                this.axios.get('api/twofaccounts/' + this.id + '/otp').then(response => {
                     let spacePosition = Math.ceil(response.data.otp.length / 2);
                     
                     this.otp = response.data.otp.substr(0, spacePosition) + " " + response.data.otp.substr(spacePosition);

resources/js/views/Accounts.vue

@@ -109,7 +109,7 @@
 
             this.username = localStorage.getItem('user')
 
-            axios.get('api/twofaccounts').then(response => {
+            this.axios.get('api/twofaccounts').then(response => {
                 response.data.forEach((data) => {
                     this.accounts.push({
                         id : data.id,
@@ -151,7 +151,7 @@
             deleteAccount:  function (id) {
                 if(confirm(this.$t('twofaccounts.confirm.delete'))) {
 
-                    axios.delete('/api/twofaccounts/' + id)
+                    this.axios.delete('/api/twofaccounts/' + id)
 
                     this.accounts.splice(this.accounts.findIndex(x => x.id === id), 1);
                     this.showAccounts = this.accounts.length > 0 ? true : false
@@ -162,12 +162,12 @@
             logout(evt) {
                 if(confirm(this.$t('auth.confirm.logout'))) {
 
-                    axios.get('api/logout')
+                    this.axios.get('api/logout')
                     .then(response => {
                         localStorage.removeItem('jwt');
                         localStorage.removeItem('user');
 
-                        delete axios.defaults.headers.common['Authorization'];
+                        delete this.axios.defaults.headers.common['Authorization'];
 
                         this.$router.go('/login');
                     })

resources/js/views/auth/Register.vue

@@ -73,7 +73,7 @@
 
         created: function() {
             // we check if a user account already exists
-            axios.post('api/checkuser')
+            this.axios.post('api/checkuser')
             .then(response => {
                 if( response.data.userCount > 0) {
                     this.errorMessage = this.$t('errors.already_one_user_registered') + ' ' + this.$t('errors.cannot_register_more_user')

resources/js/views/twofaccounts/Create.vue

@@ -173,7 +173,7 @@
 
             deleteIcon(event) {
                 if(this.tempIcon) {
-                    axios.delete('/api/icon/delete/' + this.tempIcon)
+                    this.axios.delete('/api/icon/delete/' + this.tempIcon)
                     this.tempIcon = ''
                 }
             },

resources/js/views/twofaccounts/Edit.vue

@@ -105,7 +105,7 @@
         methods: {
             getAccount () {
 
-                axios.get('/api/twofaccounts/' + this.$route.params.twofaccountId)
+                this.axios.get('/api/twofaccounts/' + this.$route.params.twofaccountId)
                 .then(response => {
                     this.form.fill(response.data)
                     this.twofaccountExists = true
@@ -174,7 +174,7 @@
             deleteIcon(event) {
 
                 if( this.tempIcon && this.tempIcon !== this.form.icon ) {
-                    axios.delete('/api/icon/delete/' + this.tempIcon)
+                    this.axios.delete('/api/icon/delete/' + this.tempIcon)
                 }
 
                 this.tempIcon = ''

resources/views/landing.blade.php

@@ -22,7 +22,6 @@
     <div id="app">
         <app></app>
     </div>
-    <script src="{{ mix('js/bootstrap.js') }}"></script>
     <script src="{{ mix('js/app.js') }}"></script>
     <script src="{{ mix('js/locales.js') }}"></script>
 </body>

webpack.mix.js

@@ -12,7 +12,6 @@ const mix = require('laravel-mix');
  */
 
 mix.js('resources/js/app.js', 'public/js')
-    .js('resources/js/bootstrap.js', 'public/js')
     .js('resources/js/langs/locales.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css');