Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Vue.js 如何让axios拦截器重试原始请求?_Vue.js_Jwt_Axios_Vuex - Fatal编程技术网

Vue.js 如何让axios拦截器重试原始请求?

Vue.js 如何让axios拦截器重试原始请求?,vue.js,jwt,axios,vuex,Vue.js,Jwt,Axios,Vuex,我正在尝试在vue.js应用程序中实现令牌刷新。到目前为止,这是可行的,因为它会在401响应上刷新存储中的令牌,但我需要做的就是让拦截器稍后再次重试原始请求 main.js axios.interceptors.response.use( response => { return response; }, error => { console.log("original request", error.config);

我正在尝试在vue.js应用程序中实现令牌刷新。到目前为止,这是可行的,因为它会在401响应上刷新存储中的令牌,但我需要做的就是让拦截器稍后再次重试原始请求

main.js

axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        console.log("original request", error.config);
        if (error.response.status === 401 && error.response.statusText === "Unauthorized") {
            store.dispatch("authRefresh")
                .then(res => {
                    //retry original request???
                })
                .catch(err => {
                    //take user to login page
                    this.router.push("/");
                });
        }
    }
);
authRefresh(context) {
    return new Promise((resolve, reject) => {
        axios.get("auth/refresh", context.getters.getHeaders)
            .then(response => {
                //set new token in state and storage
                context.commit("addNewToken", response.data.data);
                resolve(response);
            })
            .catch(error => {
                reject(error);
            });
    });
},
store.js

axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        console.log("original request", error.config);
        if (error.response.status === 401 && error.response.statusText === "Unauthorized") {
            store.dispatch("authRefresh")
                .then(res => {
                    //retry original request???
                })
                .catch(err => {
                    //take user to login page
                    this.router.push("/");
                });
        }
    }
);
authRefresh(context) {
    return new Promise((resolve, reject) => {
        axios.get("auth/refresh", context.getters.getHeaders)
            .then(response => {
                //set new token in state and storage
                context.commit("addNewToken", response.data.data);
                resolve(response);
            })
            .catch(error => {
                reject(error);
            });
    });
},
我可以在控制台中记录
error.config
并查看原始请求,但是有人知道我在这里做什么来重试原始请求吗?如果它失败了,还要阻止它一次又一次地循环


还是我完全错了?欢迎建设性的批评。

您可以这样做:

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {

  const originalRequest = error.config;

  if (error.response.status === 401 && !originalRequest._retry) {

    originalRequest._retry = true;

    const refreshToken = window.localStorage.getItem('refreshToken');
    return axios.post('http://localhost:8000/auth/refresh', { refreshToken })
      .then(({data}) => {
        window.localStorage.setItem('token', data.token);
        window.localStorage.setItem('refreshToken', data.refreshToken);
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + data.token;
        originalRequest.headers['Authorization'] = 'Bearer ' + data.token;
        return axios(originalRequest);
      });
  }

  return Promise.reject(error);
});

当有多个请求同时运行时,这能工作吗?对不起,我不知道多个请求