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

Question

注意：我已经分离了我的客户端（Vue.js）和服务器（DjangoRest）。 我正在使用 JWT 来验证从客户端到服务器的每个请求。 Flow-Client 将用户凭据发送到服务器。 如果凭据有效，服务器会发回刷新和访问令牌。 客户端存储访问和刷新令牌。 我已将刷新令牌有效期设置为 1 周，访问时间为 30 分钟。 接下来，我想确保访问令牌在到期前 15 分钟自动刷新。 为此，将客户端存储的刷新令牌发送到服务器，然后服务器发出新的访问令牌和刷新令牌，并将其发送回客户端。 我如何在 Vuex 商店中实现它？ 我是网络开发和 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之类的库来解码访问令牌并提取过期时间。 一旦你有到期时间，你有几个可用的选项：

• 每次发起请求前检查token是否需要刷新
• 使用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，请让您的用户重新登录。

你需要的是一个 axios 拦截器。

我为一个项目实现了这个

import axios from 'axios'
import router from './router'
import store from './store'
import Promise from 'es6-promise'

const ax = axios.create({
  baseURL: 'http://localhost:3000',
  headers: {
    'Content-type': 'application/json'
  }
})

ax.interceptors.response.use(
  (response) => {
    return response
  },
  (err) => {
    console.log(err.response.config.url)
    // return other errors
    if (err.response.status !== 401) {
      return new Promise((resolve, reject) => {
        reject(err)
      })
    }
    // error on login
    if (err.response.config.url === '/auth/login') {
      return new Promise((resolve, reject) => {
        reject(err)
      })
    }
    // error on refresh
    if (err.response.config.url === '/auth/refresh') {
      console.log('ERRO NO REFRESH')
      router.push('/logout')
      return new Promise((resolve, reject) => {
        reject(err)
      })
    }
    // refresh
    return ax.get('/auth/refresh', { withCredentials: true }).then(
      success => {
        const config = err.response.config
        config.headers.Authorization = 'Bearer ' + success.data.access_token
        store.commit('setToken', success.data.access_token)
        return ax(config)
      }
    )
  }
)

export default ax