From 5531c0e7e1e32c8c5b76e8295b3f3792ea1a0367 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Sun, 26 Jan 2020 21:04:33 +0100
Subject: [PATCH] Set global axios instance using vue-axios wrapper
---
package-lock.json | 11 +++--
package.json | 3 +-
resources/js/api.js | 46 +++++++++++++++++++++
resources/js/app.js | 1 +
resources/js/bootstrap.js | 13 +++---
resources/js/components/Form.js | 7 ++--
resources/js/components/TwofaccountShow.vue | 6 +--
resources/js/views/Accounts.vue | 8 ++--
resources/js/views/auth/Register.vue | 2 +-
resources/js/views/twofaccounts/Create.vue | 2 +-
resources/js/views/twofaccounts/Edit.vue | 4 +-
resources/views/landing.blade.php | 1 -
webpack.mix.js | 1 -
13 files changed, 77 insertions(+), 28 deletions(-)
create mode 100644 resources/js/api.js
diff --git a/package-lock.json b/package-lock.json
index 590073ba..dd26fd1a 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index c70ab180..2300feff 100644
--- a/package.json
+++ b/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"
}
diff --git a/resources/js/api.js b/resources/js/api.js
new file mode 100644
index 00000000..11517456
--- /dev/null
+++ b/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)
+ }
+
+
+})
\ No newline at end of file
diff --git a/resources/js/app.js b/resources/js/app.js
index 0e65a4fe..d69bf39a 100644
--- a/resources/js/app.js
+++ b/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'
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 7a17f6b5..0d4fbb6e 100644
--- a/resources/js/bootstrap.js
+++ b/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 ( error.response.status === 404 ) { viewName = '404' }
+ if ( error.response.status >= 500 ) { viewName = 'genericError' }
- if (status >= 500) {
- router.push({name: 'genericError', params: { err : error.response }})
- }
-
- // if (status === 404) {
- // router.push({name: '404'})
- // }
+ router.push({name: viewName, params: { err : error.response }})
return Promise.reject(error)
})
diff --git a/resources/js/components/Form.js b/resources/js/components/Form.js
index f12411c1..c7c8b0ad 100644
--- a/resources/js/components/Form.js
+++ b/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()
diff --git a/resources/js/components/TwofaccountShow.vue b/resources/js/components/TwofaccountShow.vue
index 71bc425c..877ea03b 100644
--- a/resources/js/components/TwofaccountShow.vue
+++ b/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);
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index a9e8c959..31e9d6b2 100644
--- a/resources/js/views/Accounts.vue
+++ b/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');
})
diff --git a/resources/js/views/auth/Register.vue b/resources/js/views/auth/Register.vue
index c75df509..032bd0df 100644
--- a/resources/js/views/auth/Register.vue
+++ b/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')
diff --git a/resources/js/views/twofaccounts/Create.vue b/resources/js/views/twofaccounts/Create.vue
index 4f5d8fb7..f264c703 100644
--- a/resources/js/views/twofaccounts/Create.vue
+++ b/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 = ''
}
},
diff --git a/resources/js/views/twofaccounts/Edit.vue b/resources/js/views/twofaccounts/Edit.vue
index ef589efc..51e4192a 100644
--- a/resources/js/views/twofaccounts/Edit.vue
+++ b/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 = ''
diff --git a/resources/views/landing.blade.php b/resources/views/landing.blade.php
index 51af69d8..11d4d424 100644
--- a/resources/views/landing.blade.php
+++ b/resources/views/landing.blade.php
@@ -22,7 +22,6 @@
-
diff --git a/webpack.mix.js b/webpack.mix.js
index 4be6eb4c..2d484be1 100644
--- a/webpack.mix.js
+++ b/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');