Set global axios instance using vue-axios wrapper

This commit is contained in:
Bubka 2020-01-26 21:04:33 +01:00
parent 0fd9869230
commit 5531c0e7e1
13 changed files with 77 additions and 28 deletions

11
package-lock.json generated
View File

@ -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",

View File

@ -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"
}

46
resources/js/api.js vendored Normal file
View File

@ -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)
}
})

1
resources/js/app.js vendored
View File

@ -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'

View File

@ -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)
})

View File

@ -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()

View File

@ -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);

View File

@ -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');
})

View File

@ -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')

View File

@ -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 = ''
}
},

View File

@ -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 = ''

View File

@ -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>

1
webpack.mix.js vendored
View File

@ -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');