Vuejs2 刷新令牌后,将原始请求的响应存储在vuex存储中

Vuejs2 刷新令牌后,将原始请求的响应存储在vuex存储中,vuejs2,axios,jwt,vuex,Vuejs2,Axios,Jwt,Vuex,我有一个vuex模块,其操作通过axios提供的服务向API发出请求。 一旦请求成功,我就使用模块的变体在本地存储响应 我使用JWT令牌对调用进行身份验证。我的身份验证令牌可能会过期,当过期时,我会调用API刷新令牌 我使用一个拦截器来检测响应是否是401,存储原始请求,调用刷新令牌,并进行包含刷新令牌的原始调用 目前,我有两个问题: 因为调用不再发生在模块中,所以我无法存储响应 第一个请求在模块中失败,因此我将错误消息发送给模块 我有没有办法维护原始链并使第二个请求响应返回到模块 axios.

我有一个vuex模块,其操作通过axios提供的服务向API发出请求。 一旦请求成功,我就使用模块的变体在本地存储响应

我使用JWT令牌对调用进行身份验证。我的身份验证令牌可能会过期,当过期时,我会调用API刷新令牌

我使用一个拦截器来检测响应是否是401,存储原始请求,调用刷新令牌,并进行包含刷新令牌的原始调用

目前,我有两个问题:

  • 因为调用不再发生在模块中,所以我无法存储响应
  • 第一个请求在模块中失败,因此我将错误消息发送给模块
  • 我有没有办法维护原始链并使第二个请求响应返回到模块

    axios.js

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