如何在客戶端（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