javascript - 如何在客户端(vue.js)实现自动刷新?
问题描述
注意:我已经分离了我的客户端(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)
})
})
}
}
})
先感谢您。
解决方案
正如您所指出的,这在很大程度上是一个想法问题,因此,有很多方法可以解决它。
在处理此类机制时,我要牢记的一件事是尽可能避免轮询。这是一个受该设计原则启发的解决方案。
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
}
}
})
推荐阅读
- python - 没有足够的值来解包(试图在稀疏矩阵的每一行中只保留前 K 个值)
- netlogo - NetLogo:如何让海龟在一次滴答后返回
- powerbi - 创建存储桶以在 Power BI 中定位月份
- python - 关于转换 y 和 x 轴的想法
- python - 如何处理使用 simpleITK 加载的图像中的负像素值
- python - 烧瓶集成错误:TypeError:“str”和“int”实例之间不支持“>=”
- atlassian-sourcetree - 当我选择使用外部合并工具解决冲突时,源树没有启动外部合并工具
- postgresql - 如何在 NGINX for PostgreSQL 上配置 proxy_pass?
- ansible - 即使使用 from_json,jinja2 也会将列表转换为字符串
- laravel - 显示图片上传验证错误