1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 前端token知识:token如何存储?token过期如何处理?

前端token知识:token如何存储?token过期如何处理?

时间:2024-02-12 01:38:12

相关推荐

前端token知识:token如何存储?token过期如何处理?

一、前后端交互的过程中token如何存储?

方法1:存在 cookie 中

cookie的大小约4k,兼容性在ie6及以上 都兼容,在浏览器和服务器间来回传递,因此它得在服务器的环境下运行,而且可以设定过期时间,默认的过期时间是session会话结束。

方法2:存在 localStorage 中

localStorage的大小约5M,兼容性在ie7及以上都兼容,有浏览器就可以,不需要在服务器的环境下运行, 会一直存在,除非手动清除 。

二、token过期时,前端该怎么处理?

方法1:跳回登陆页面重新登陆(不推荐)

在vue中我们可以在 axios 拦截器中这样写:

instance.interceptors.response.use(

function (response) {

// 对响应数据做点什么

return response.data

},

function (error) {

if (error.response) {

if (error.response.status === 401) {

Message.error('登陆过期请重新登陆!')

setToken('')

router.push({

name: 'login'

})

}

}

}

// 对响应错误做点什么

return Promise.reject(error.response)

}

)

方法2:重新获取token

出于本文的目的,我们将关注两种最常见的令牌类型:访问令牌和刷新令牌。

访问令牌携带必要的信息以直接访问资源。换句话说,当客户端将访问令牌传递给管理资源的服务器时,该服务器可以使用令牌中包含的信息来决定客户端是否被授权。访问令牌通常具有到期日期并且是短暂的。

刷新令牌包含获取新访问令牌所需的信息。换句话说,每当访问令牌需要访问特定资源时,客户端可以使用刷新令牌来获得由认证服务器发布的新访问令牌。常见用例包括在旧的访问令牌过期后获取新访问令牌,或者首次访问新资源。刷新令牌也可以过期,但相当长寿。刷新令牌通常受到严格的存储要求,以确保它们不会泄露。

总结: 服务器生成token的过程中,会有两个时间,一个是token失效时间,一个是token刷新时间。

刷新时间肯定比失效时间长,当用户的 token 过期时,你可以拿着过期的token去换取新的token,来保持用户的登陆状态,当然你这个过期token的过期时间必须在刷新时间之内,如果超出了刷新时间,那么返回的依旧是 401

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。