Question

我使用Larave + JWT和vue2 + vuex2 + axios

因此，当用户登录时，我将身份验证令牌存储在vuex存储中。当令牌过期时，我需要刷新它。为了刷新它，我需要将相同的令牌发送到/refresh路由，并获得一个新令牌。至少我是如何得到的，实际上它是有效的。

问题是拦截器捕获401响应并尝试刷新令牌，但是，如果在我的组件中我发送了许多带有过期令牌的请求，该怎么办？由于ajax请求是异步的，因此拦截器代码会运行很多次。所以我收到了很多刷新请求。刷新初始令牌后，它将被视为无效。当拦截器尝试刷新无效令牌服务器响应时出错，我重定向到登录页面。

以下是代码：

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

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

    axios.post('auth/refresh').then((response) => {
      let token = response.data.token

      store.dispatch('auth/setAuthToken', token)

      let authorizationHeader = `Bearer ${token}`

      axios.defaults.headers = { 'Authorization': authorizationHeader }
      originalRequest.headers['Authorization'] = authorizationHeader

      return axios(originalRequest)
    }, (error) => {
      store.dispatch('auth/clearAuthInfo')
      router.push({ name: 'login' })
    })
  }

  return Promise.reject(error);
});

Answer 1

我认为你必须改变你刷新令牌的方法。像Auth0这样的领导者建议主动定期刷新以解决这个问题。

Here is a SO answer他们在那里谈论它。

将令牌过期时间设置为一周，并在每次用户打开Web应用程序时每隔一小时刷新一次令牌。如果用户没有打开应用程序超过一周，他们将不得不再次登录，这是可接受的Web应用程序用户体验。

发送许多ajax请求时处理axios拦截器

1 个答案: