[英]import vuex store into axios and app.js file
Using NativeScript vue. 使用NativeScript vue。 I have put axios in its own file, where I can add interceptors etc (in this case to handle a JWT refresh token). 我已经将axios放在其自己的文件中,可以在其中添加拦截器等(在这种情况下,是为了处理JWT刷新令牌)。 In my vuex store (ccStore) I have stored the authToken, and refreshToken. 在我的vuex存储(ccStore)中,我已经存储了authToken和refreshToken。 I'm using vuex persist. 我正在使用vuex坚持。
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.log(error)
return Promise.reject(error)
}
)
axios.interceptors.response.use(
function(response) {
console.log(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.log(error)
return Promise.reject(error)
}
}
)
export default axios;
In my app.js file, I import this modified axios, and assign it to 在我的app.js文件中,导入此修改后的axios,并将其分配给
Vue.prototype.$http = axios;
I did this so that the same instance of axios with interceptors is available in every component [ I ran into some problems doing a refactor last night - circular references when including my modified axios in the mounted hook of each component... but sticking it globally seems to work ] 我这样做是为了在每个组件中都可以使用带有拦截器的axios的相同实例[昨晚在重构时遇到了一些问题-将修改后的axios包含在每个组件的已挂接的钩子中时使用循环引用...但是将其全局粘贴似乎有效]
However, in my app.js file I am also calling ccStore so that I can attach it to my vue instance... Am I doing this right? 但是,在我的app.js文件中,我还调用了ccStore,以便可以将其附加到vue实例上。我这样做对吗? Is the same instance of ccStore being referenced in both app.js and axios? app.js和axios是否都引用了ccStore的同一实例?
Also - to bend the mind further, I have some actions within my vuex store for which I need axios... so I am also having to include axios within my vuex store file - yet axios already includes my vues store... 另外-为了进一步改变思路,我在vuex商店中有一些需要axios的操作...因此,我还必须在我的vuex商店文件中包含axios-但是axios已经包括了我的vues商店...
so... 所以...
app.js imports store and axios, store imports axios, axios imports store app.js导入存储和axios,存储导入axios,axios导入存储
Is this not circular too? 这也不是圆形的吗?
I don't know if it can be helpful, but I use to initialize a custom Axios instance. 我不知道它是否有帮助,但是我用来初始化自定义Axios实例。
scripts/axios-config.js 脚本/爱可信-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 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();
No store.js code because I simply import nativescript-vue, vuex and (if needed) axiosConfig object. 没有store.js代码,因为我只导入了nativescript-vue,vuex和axiosConfig对象(如果需要)。
I've never had circular problems this way, hope it helps 我从来没有这样的循环问题,希望对你有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.