Использование NativeScript vue. Я поместил axios в отдельный файл, где я могу добавить перехватчики и т. д. (в данном случае для обработки токена обновления JWT). В моем хранилище vuex (ccStore) я сохранил authToken и refreshToken. Я использую vuex persist.
import axios from 'axios'
// abridged ...
import ccStore from './store';
const DEV_BASE_URL = ccStore.getters.getBaseURL // local ip injected by webpack
const PROD_BASE_URL = ''
axios.defaults.baseURL = (TNS_ENV === 'production') ? PROD_BASE_URL : DEV_BASE_URL
axios.interceptors.request.use( function (config) {
let token = ''
if (config.url.includes('/auth/refresh')) { //use the refresh token for refresh endpoint
token = ccStore.getters.getRefreshToken;
} else { //otherwise use the access token
token = ccStore.getters.getAuthToken;
}
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
},
function (error) {
console.info(error)
return Promise.reject(error)
}
)
axios.interceptors.response.use(
function(response) {
console.info(response)
return response
},
function(error) {
const originalRequest = error.config
if (error.response && error.response.status === 401) {
if (originalRequest.url.includes('/auth/refresh')) { //the original request was to refresh so we must log out
return ccStore.dispatch('logout')
} else {
return ccStore.dispatch('refreshToken').then(response => { //try refreshing before logging out
return axios(originalRequest)
})
}
} else {
console.info(error)
return Promise.reject(error)
}
}
)
export default axios;
В моем файле app.js я импортирую эти измененные аксиомы и назначаю их
Vue.prototype.$http = axios;
Я сделал это для того, чтобы один и тот же экземпляр аксиом с перехватчиками был доступен в каждом компоненте [Прошлой ночью я столкнулся с некоторыми проблемами при рефакторинге - круговые ссылки при включении моих измененных аксиом в смонтированный хук каждого компонента... но прикрепил его глобально вроде работает]
Однако в моем файле app.js я также вызываю ccStore, чтобы прикрепить его к моему экземпляру vue... Правильно ли я делаю? Один и тот же экземпляр ccStore упоминается как в app.js, так и в axios?
Кроме того, чтобы еще больше согнуть ум, у меня есть некоторые действия в моем хранилище vuex, для которых мне нужны аксиомы... поэтому мне также нужно включить аксиомы в мой файл хранилища vuex - но аксиос уже включает мое хранилище vues...
так...
app.js импортирует store и axios, хранить импортные аксиомы, магазин импорта axios
Это тоже не круглая?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я не знаю, может ли это быть полезно, но я использую для инициализации пользовательского экземпляра Axios.
скрипты/axios-config.js
import axios from 'axios';
import store from '../store';
import Vue from 'nativescript-vue';
export default {
endpoint: "https://myendpoint.com",
requestInterceptor: config => {
config.headers.Authorization = store.getters.getToken;
return config;
},
init() {
Vue.prototype.$http = axios.create({ baseURL: this.endpoint });
Vue.prototype.$http.interceptors.request.use(this.requestInterceptor);
}
}
app.js
import Vue from 'nativescript-vue';
import store from './store';
import axiosConfig from './scripts/axios-config';
import router from './router'; // custom router
axiosConfig.init();
// code
new Vue({
render: h => h('frame', [h(router['login'])]),
store
}).$start();
Нет кода store.js, потому что я просто импортирую объект nativescript-vue, vuex и (при необходимости) axiosConfig.
У меня никогда не было круговых проблем таким образом, надеюсь, это поможет