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

Posted 2023-02-19

【中文标题】如何在客户端（vue.js）实现自动刷新？

【英文标题】：How to implement auto refresh in client side(vue.js)?

【发布时间】：2019-09-08 21:06:05

【问题描述】：

注意：我已经分离了我的客户端（Vue.js）和服务器（DjangoRest）。 我正在使用 JWT 验证从客户端向服务器发出的每个请求。 流动- 客户端将用户凭据发送到服务器。如果凭据有效，服务器会发回刷新和访问令牌。客户端存储访问和刷新令牌。 我已将刷新令牌到期时间设置为 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)
          )
      )
    
  
)

提前谢谢你。

【问题讨论】：

你的代码在哪里？ Read how to ask questions

现在添加检查。但是，问题更多的是关于想法/逻辑

【参考方案1】：

最好依靠您的服务器响应代码而不是到期时间。 尝试访问受保护的路由，如果返回 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

【讨论】：

我以前也是这么想的，但是我觉得一开始就没有refresh_token的意义吗？

我必须为我的前端开发人员实现它并且它有效。是基于博客的解决方案，我现在记得原来的了。

【参考方案2】：

正如您所指出的，这是一个非常有创意的问题，因此，有很多方法可以解决它。

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

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
    
  
)

【讨论】：

同时 setTimeout 确保将 timeUntilRefresh 乘以 1000 转换为毫秒。const refreshTask = setTimeout(() => dispatch('refreshTokens', credentials), timeUntilRefresh)

你用commit('refreshTask', refreshTask)做什么

如果需要，用于稍后取消超时。一种这样的情况可能是用户注销。