Axios 没有进入 catch - 响应拦截器

Question

我已经使用访问令牌（jwt）和刷新令牌对单页应用程序和身份验证做出反应。我正在使用 axios 拦截器来处理它。

catch 中的代码未处理：

axios.interceptors.response.use(
            (response) => response,
            async (error) => {
                const config = error.config

                const headers = error.response?.headers

                const TokenExpiredHeader =
                    headers && headers['token-expired'] === 'true'

                if (
                    error?.response?.status === 401 &&
                    TokenExpiredHeader &&
                    !config._retry
                ) {
                    config._retry = true
                    return axios
                        .post('/Tokens/Refresh', {
                            accessToken: localStorage.getItem('accessToken')
                        })
                        .then((res) => {
                            localStorage.setItem(
                                'accessToken',
                                res.data.accessToken
                            )
                            return axios(config)
                        })
                        .catch((refreshErr) => {
                            // This code is not executed when receive error!
                            localStorage.removeItem('accessToken')
                            history.push(Paths.login())
                            return Promise.reject(error)
                        })
                } else {
                    localStorage.removeItem('accessToken')
                    history.push(Paths.login())
                }

                return Promise.reject(error)
            }

Answer 1

从 cmets 开始，我们在前端项目中使用的方法是将保持令牌新鲜的逻辑委托给间隔计时器。这里的想法：

• 如果刷新身份验证令牌失败，则将用户发送到注销页面
• 不要让用户觉得他们可以对可能无效的 API 访问（与登录会话共享）执行操作
• 最好的魔法是代码不会创建下一个开发人员难以理解的流程

此外，在 documentation for Keycloak 和 Vue 应用程序中也描述了其中的一些理念。 Keycloak 是由 RedHat 赞助的开源 OpenID/SAML 身份验证提供程序。

在我们的代码（Quasar/Vue3 应用程序）中，我们使用 axios 请求拦截器来注入 Keycloak JWT 不记名令牌：

  const axiosConfig: AxiosRequestConfig = {
    baseURL: appConfig.apiUrl,
    withCredentials: true
  };

  api = axios.create(axiosConfig);

  api.interceptors.request.use(
    (config) => {
      // Only deal with bearer token, if keycloak is enabled
      if (app.config.globalProperties.$keycloak) {
        const keycloak = app.config.globalProperties.$keycloak;

        if (keycloak.authenticated) {
          const keycloak = app.config.globalProperties.$keycloak;
          const token = keycloak.token as string;
          if (token && config.headers) {
            config.headers.Authorization = `Bearer ${token}`;
          }
        }
      }
      return config;
    }
  );

那么我们的代码本质上是 Keycloak 文档页面中提供的示例的略微修改版本。这里重要的是它正在尝试做什么，而不是代码本身，您需要根据您正在做的事情进行调整：

  setInterval(() => {
    keycloak.updateToken(70).then((refreshed) => {
      if (refreshed) {
        Vue.$log.info('Token refreshed' + refreshed);
      } else {
        Vue.$log.warn('Token not refreshed, valid for '
          + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds');
      }
    }).catch(() => {
      Vue.$log.error('Failed to refresh token');
    });
  }, 6000)

可能还有其他关于如何解决此问题的建议，但我总是优先考虑我的代码的“可读性和可维护性”，因此它会影响我的实现选择。