vue.js - 在 nuxt js 中使用 axios 进行身份验证过期后重定向

Question

这是我的刷新 token 插件

refresh_token.js

const axiosOnResponseErrorPlugin = ({ app, $axios, store }) => {
  $axios.onResponseError(err => {
    const code = parseInt(err.response && err.response.status)

    let originalRequest = err.config
    if (code === 401) {
      originalRequest.__isRetryRequest = true
      const refreshToken = store.state.auth.refresh_token ? store.state.auth.refresh_token : null
      if (refreshToken) {
        return new Promise((resolve, reject) => {
          $axios.post('refresh-token/', {
                      refresh: refreshToken
                 })
                 .then((response) => {
                   
                  if (response.status === 200) {
                    let auth = response.data
                    err.response.config.headers['Authorization'] = `${auth.access}`
                  }
                  resolve(response)
                 })
                 .catch(e => {
                    // should jump here after facing error from request
                    reject(e)
                 })
        })
        .then((res) => {
          return $axios(originalRequest)
        })
        .catch(e => {
          app.router.push('/')
        })
      }
    }
  })
}

export default axiosOnResponseErrorPlugin

我的问题是，如果刷新 token 未过期，则它可以正常工作，但如果它已过期，则它应该重定向到当前未执行的页面。我找不到任何方法可以在过期后重定向/推送到另一个路由器。

有什么建议吗？

Answer 1

这是我对这种情况的解决方案..您还必须检查您的原始请求。为此，它将创建一个循环..如果刷新 token 失败，请使用您的刷新 token URL 进行检查。

$axios.interceptors.response.use(
    response => {
      return response;
    },
    function(error) {
      const originalRequest = error.config;

      if (error.response.status === 401 && originalRequest.url === "accounts/refresh-token/") {
        store.dispatch("clearUserData")
        return Promise.reject(error)
      }

      if (error.response.status === 401 && !originalRequest._retry) {
        console.log('originalRequest ', originalRequest)
        originalRequest._retry = true;
        const refreshToken = localStorage.getItem("UserRefreshToken");
        return store.dispatch("refreshToken")
          .then(res => {
            $axios.defaults.headers.common[
              "Authorization"
            ] = localStorage.getItem("UserToken");
            return $axios(originalRequest);
          })
      }
      return Promise.reject(error);
    }
  );