带有刷新令牌的Vue axios拦截器:页面为空

时间:2021-05-27 06:43:51

标签: javascript vue.js axios refresh-token

我正在尝试使用我的 Vue.JS 和 ASP .NET Core 5 作为后端来实现刷新令牌。这是工作。我的意思是,我确实从 API 收到了 401 错误,我确实请求并获得了刷新令牌。我也从(以前)失败的请求中获取响应数据。但是,Vue 页面/组件保持空白/空。这是我的代码:

import axios from 'axios';

export default function setup() {
    axios.interceptors.request.use(function (config) {
        const token = localStorage.getItem('token');
        config.headers.common["Authorization"] = `Bearer ${token}`;
        return config;

    }, function (err) {
        return Promise.reject(err);
    });

    // Response interceptor for API calls
    axios.interceptors.response.use((response) => {
        return response
    }, function (error) {
            const originalRequest = error.config;

            // Return any error which is not due to authentication back to the calling service
            if (error.response.status !== 401) {
                return Promise.reject(error);
            }

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

                axios.post(`api/auth/refresh-token`)
                    .then(response => {
                        const token = response.data.jwttoken;
                        const refresh_token = response.data.refreshtoken;

                        if (token) {
                            // Store jwt token in local storage 
                            localStorage.setItem('token', token);
                            localStorage.setItem('refreshToken', refresh_token);
                            originalRequest.headers['Authorization'] = token;
                            error.config.headers['Authorization'] = `Bearer ${token}`;
                            
                            return new Promise((resolve, reject) => {
                                axios.request(error.config).then(response => {
                                    // Here I see the response data
                                    console.log('JSON-interceptor-response-axios: ' + JSON.stringify(response));
                                    resolve(response);
                                }).catch((error) => {
                                    reject(error);
                                })
                            });
                        }
                    })
                    .catch(error => {
                        console.log('refresh-token error!' + error);
                    });
            }
        return Promise.reject(error);
    });
}

0 个答案:

没有答案