如何在客户端(vue.js)中实现自动刷新? [英] How to implement auto refresh in client side(vue.js)?

问题描述

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

Note: I have seperated my client(Vue.js) and server(DjangoRest). I'm using JWT to validate every request made from the client to the server. Flow- Client sends user credentials to server. Server sends back a refresh and access token if credentials are valid. Client stores the access and refresh token. I have set the refresh token expiry to 1 week,access to 30 mins. Next, I want to make sure that the access token is auto refreshed 15 mins prior to its expiry. To do this, the stored refresh token in client side is send to the server, the server then issues a new access token and refresh token, sends it back to the client. How do i implement this in the Vuex store?. I'm a complete newbie to web development and vue.js. It would be great if someone could provide some code or explain in details.

我已经在商店中实现了loginUser，注销用户，registerUser，它们工作正常.但是我坚持使用自动刷新逻辑. 我的猜测是客户端必须反复检查剩余的访问令牌到期时间.剩下约15分钟时，我们必须初始化自动刷新功能.请帮我这个逻辑.

I have already implemented loginUser,logout user,registerUser in store and they are working fine. But I'm stuck with the auto refresh logic. My guess is that the client has to repeatedly check the access token expiry time left. When about 15 mins is left, we have to initialize the autorefresh function. Please help me with this logic.

这是我的Vueex商店:

Here's my Vueex store:

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)
          })
      })
    }
  }
})

谢谢.

推荐答案

正如您所指出的，这是一个非常主意的问题，因此，有很多解决方法.

This is very much an idea question as you've pointed out and as such, there are many ways of solving it.

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

One thing I try to keep in mind when dealing with such mechanisms is to always avoid polling when possible. Here's a solution inspired by that design principle.

JWT令牌在非常特定的时间内有效.剩余的到期时间可以很容易地用作访问令牌的一部分.您可以使用 jwt-decode 之类的库来解码访问令牌并提取到期时间. 拥有到期时间后，您可以使用以下几个选项:

JWT tokens are valid for a very specific amount of time. The time left for expiration is readily available as part of the access token. You can use a library such as jwt-decode to decode the access token and extract the expiration time. Once you have the expiration time, you have a several options available:

• 每次请求令牌前都要检查令牌，以了解是否需要刷新
• 使用setTimeout在它到期前的X秒钟定期刷新它

• Check token every time before making a request to know if it needs to be refreshed
• Use setTimeout to refresh it periodically X seconds before it expires

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

Your code could be implemented as follows:
Note: Please treat the following as pseudo-code. I have not tested it for errors---syntax or otherwise.

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
    }
  }
})

这篇关于如何在客户端(vue.js)中实现自动刷新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！