如何在客户端（vue.js）中实现自动刷新？

Question

注意：我已经分离了我的客户端（Vue.js）和服务器（DjangoRest）。我正在使用 JWT 来验证从客户端向服务器发出的每个请求。Flow- 客户端将用户凭据发送到服务器。如果凭据有效，服务器会发回刷新和访问令牌。客户端存储访问和刷新令牌。我已将刷新令牌到期时间设置为 1 周，访问时间为 30 分钟。接下来，我想确保访问令牌在其到期前 15 分钟自动刷新。为此，将客户端存储的刷新令牌发送到服务器，然后服务器发出新的访问令牌和刷新令牌，将其发送回客户端。我如何在 Vuex 商店中实现这一点？我是 Web 开发和 vue.js 的完全新手。如果有人可以提供一些代码或详细解释，那就太好了。

我已经在商店中实现了 loginUser、logout user、registerUser，它们运行良好。但我坚持使用自动刷新逻辑。我的猜测是客户端必须反复检查剩余的访问令牌到期时间。当还剩下大约 15 分钟时，我们必须初始化自动刷新功能。请帮我解决这个逻辑。

这是我的 Vueex 商店：

import Vue from 'vue'
import Vuex from 'vuex'
import axiosBase from './api/axios-base'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
     accessToken: '' || null,
     refreshToken: '' || null
  },
  getters: {
    loggedIn (state) {
      return state.accessToken != null
    }
  },
  mutations: {
    loginUser (state) {
      state.accessToken = localStorage.getItem('access_token')
      state.refreshToken = localStorage.getItem('refresh_token')
    },
    destroyToken (state) {
      state.accessToken = null
      state.refreshToken = null
    }
  },
  actions: {
    registerUser (context, data) {
      return new Promise((resolve, reject) => {
        this.axios.post('/register', {
          name: data.name,
          email: data.email,
          username: data.username,
          password: data.password,
          confirm: data.confirm
        })
          .then(response => {
            resolve(response)
          })
          .catch(error => {
            reject(error)
          })
      })
    },
    // fetch data from api whenever required.
    backendAPI (context, data) {

    },
    logoutUser (context) {
      if (context.getters.loggedIn) {
        return new Promise((resolve, reject) => {
          axiosBase.post('/api/token/logout/')
            .then(response => {
              localStorage.removeItem('access_token')
              localStorage.removeItem('refresh_token')
              context.commit('destroyToken')
            })
            .catch(error => {
              context.commit('destroyToken')
              resolve()
            })
        })
      }
    },
    autoRefresh (context, credentials) {

    },
    loginUser (context, credentials) {
      return new Promise((resolve, reject) => {
        axiosBase.post('/api/token/', {
          username: credentials.username,
          password: credentials.password
        })
          .then(response => {
            localStorage.setItem('access_token', response.data.access)
            localStorage.setItem('refresh_token', response.data.refresh)
            context.commit('loginUser')
            resolve(response)
          })
          .catch(error => {
            console.log(error)
            reject(error)
          })
      })
    }
  }
})

先感谢您。

Answer 1

正如您所指出的，这在很大程度上是一个想法问题，因此有很多解决方法。

在处理此类机制时，我要牢记的一件事是在可能的情况下始终避免轮询。这是受该设计原则启发的解决方案。

JWT 令牌在非常特定的时间内有效。到期剩余时间可作为访问令牌的一部分随时使用。您可以使用jwt-decode等库来解码访问令牌并提取到期时间。一旦你有到期时间，你有几个可用的选项：

• 每次在发出请求之前检查令牌以了解它是否需要刷新
• 用于setTimeout在到期前 X 秒定期刷新它

您的代码可以如下实现：
注意：请将以下内容视为伪代码。我没有测试它的错误---语法或其他。

export default new Vuex.Store({
  ...
  actions: {
    refreshTokens (context, credentials) {
      // Do whatever you need to do to exchange refresh token for access token
      ...
      // Finally, call autoRefresh to set up the new timeout
      dispatch('autoRefresh', credentials)
    },
    autoRefresh (context, credentials) {
      const { state, commit, dispatch } = context
      const { accessToken } = state
      const { exp } = jwt_decode(accessToken)
      const now = Date.now() / 1000 // exp is represented in seconds since epoch
      let timeUntilRefresh = exp - now
      timeUntilRefresh -= (15 * 60) // Refresh 15 minutes before it expires
      const refreshTask = setTimeout(() => dispatch('refreshTokens', credentials), timeUntilRefresh * 1000)
      commit('refreshTask', refreshTask) // In case you want to cancel this task on logout
    }
  }
})

Answer 2

我认为最好依赖您的服务器响应代码而不是到期时间。尝试访问受保护的路由，如果返回 401，则请求新的访问令牌，然后重试。如果您的刷新路由也返回 401，请让您的用户重新登录。

这里我们使用这个流程。我是后端开发人员，所以我会用伪代码来解释。您可以毫无问题地在 Vuex 中实现拦截器。

res = router.desiredRoute();
// if not authorized, get a new access token from refresh route
if(res === 401) {
 refreshRes = router.refreshRoute();
 // if not authorized again, you need a new refresh
 if(refreshRes === 401) {
   logout();
   router.loginPage();
 } else {
   // store your new access token an go to desired route again
   storeAccessToken()
   router.desiredRoute();
 }
}