Vuejs2 刷新令牌后,将原始请求的响应存储在vuex存储中
我有一个vuex模块,其操作通过axios提供的服务向API发出请求。 一旦请求成功,我就使用模块的变体在本地存储响应 我使用JWT令牌对调用进行身份验证。我的身份验证令牌可能会过期,当过期时,我会调用API刷新令牌 我使用一个拦截器来检测响应是否是401,存储原始请求,调用刷新令牌,并进行包含刷新令牌的原始调用 目前,我有两个问题:Vuejs2 刷新令牌后,将原始请求的响应存储在vuex存储中,vuejs2,axios,jwt,vuex,Vuejs2,Axios,Jwt,Vuex,我有一个vuex模块,其操作通过axios提供的服务向API发出请求。 一旦请求成功,我就使用模块的变体在本地存储响应 我使用JWT令牌对调用进行身份验证。我的身份验证令牌可能会过期,当过期时,我会调用API刷新令牌 我使用一个拦截器来检测响应是否是401,存储原始请求,调用刷新令牌,并进行包含刷新令牌的原始调用 目前,我有两个问题: 因为调用不再发生在模块中,所以我无法存储响应 第一个请求在模块中失败,因此我将错误消息发送给模块 我有没有办法维护原始链并使第二个请求响应返回到模块 axios.
import axios from 'axios';
import { authService } from '@/services'
import store from '@/store'
import i18n from '@/i18n.js';
function isExpiredTokenError(data) {
return (data.errors && data.errors.find((error) => error.code == 'expired_token'))
}
function storeToken({ access_token, refresh_token }) {
/* do some stuff to store the token in localStorage and the a vuex store */
axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;
}
function refreshExpiredToken(originalConfig) {
originalConfig._retry = true;
const storedRefreshToken = store.state.auth.refreshToken
authService.refreshToken(storedRefreshToken)
.catch(function (error) {
if (error.response) {
delete axios.defaults.headers.common['Authorization']
store.dispatch('auth/logout', { error: i18n.t('errors.need_to_relog') })
}
return Promise.reject(error);
})
.then(response => {
const oauthToken = response['data']
storeToken(oauthToken)
return axios(originalConfig);
})
}
const requestInterceptor = axios.interceptors.request.use(function (config) {
const accessToken = store.state.auth.accessToken;
if (accessToken)
config.headers.Authorization = `Bearer ${accessToken}`;
return config;
}, function (err) {
return Promise.reject(err);
});
const responseInterceptor = axios.interceptors.response.use(response => {
const type = response.headers['content-type']
if (type.includes('json'))
return response.data
else
return response
}, error => {
const originalConfig = error.config;
if (error.response.status === 401) {
if (isExpiredTokenError(error.response.data) && !originalConfig._retry) {
refreshExpiredToken(originalConfig)
} else {
store.dispatch('auth/logout', { error: i18n.t('errors.something_went_wrong') })
return Promise.reject(error);
}
}
});
export default function setup() {
requestInterceptor
responseInterceptor
}
users.service.js
import { axiosFetcher } from '@/helpers';
export const usersService = {
retrieveUsers,
}
function retrieveUsers(amount) {
const requestOptions = {
method: 'POST',
data: {
amount
},
};
return axiosFetcher(`/users`, requestOptions)
.then((response) => {
return response['data']
}, (error) => {
return error
})
}
vuex模块用户.js
import { usersService } from '@/services'
const getDefaultState = () => {
return { users: [], error: null }
}
const state = getDefaultState()
const actions = {
retrieveUsers({ commit }) {
usersService.retrieveUsers()
.then(
(response) => {
if (response.isAxiosError) {
commit('requestUsersFailure', response.message)
} else {
commit('requestUsersSuccess', response)
}
}
)
},
}
const mutations = {
requestUsersFailure(state, error) {
state.error = error
},
requestUsersSuccess(state, users) {
state.users = users
},
}
const getters = {}
export const users = {
namespaced: true,
state,
actions,
mutations,
getters,
}
为了打电话,我做了this.$store.commit('users/retrieveUsers')