Vue 无感刷新token

关于无感刷新的理解:
实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的请求,获取最新的token进行覆盖,让用户感受不到token已经过期

刷新token的一些方案

方案一：后端返回过期时间，前端判断token过期时间,去调用刷新token接口
缺点：需要后端额外提供一个Token过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败。
方案二：写个定时器，定时刷新Token接口
缺点：浪费资源,消耗性能,不建议采用。
方案三：在响应拦截器中拦截，判断Token 返回过期后，调用刷新token接口

有三种方案，这里我们采用第三种方案解决

思路：

模拟操作:1. 手动修改本地储存里的那个token(改错 模拟过期)2. 触发需要标明身份的接口(错误token携带给后台操作)3. 请求返回状态为401 ,进入错误响应拦截器代码解决401问题有感刷新:清除token ,强制跳转回登陆页面,有感知的重新登陆拿到新token替换到本地需要重新触发接口,感觉特别不好无感刷新操作以及流程:刷新token,使用登陆时候保存的refresh_token,调用另外一个接口,换回来新的token值 ,替换到本地,再次完成本次未完成的请求(用户无感知)1.登陆页面 localStorage.setItem('refresh_token', res.data.data.refresh_token 存入 refresh_token2.在响应拦截器中对401状态码引入刷新token的api方法调用3.替换保存本地新的token4.error错误对象里headers替换成新的token5.axios再次发起这次未完成的请求,返回promise对象到最开始发请求的逻辑页面6.如果refresh_token也过期了，那么就判断是否过期，过期了就清除localStorage所有值跳转回登陆页面

简易代码：

首先跟后端大哥沟通，让他在登陆接口中给我们返回正常的token和刷新的token，然后我们都存起来，然后让后端大哥写一个刷新token的接口

登陆时拿到的后端数据：

把登陆时拿到的后端数据存起来

然后再响应拦截器中判断状态码为401，代表身份过期，在这里进行无感刷新token

// 添加响应拦截器  本质：就是一个函数
axios.interceptors.response.use(function (response) {// http响应状态码为2xxx 3xxx就进入这里// 对响应数据做些什么return response
}, async function (error) {// http 响应状态码为4xx 5xx就会进入这里console.log('error', error)if (error.response.status === 401) { // 状态码为401 身份过期removeToken()// 清除token,才能让路由守卫判断// 使用refresh_token 换回新的token再继续使用 用户无感知//请求后端给的刷新token的接口const res = await refreshTokenAPI()// 1.拿到新的token更新token到本地localStorage.setItem('token', res.data.data.token)// error.config 就是上一次axios请求的配置对象// console.dir(error.config)// 2. 把新的token赋予到下一次axios请求的请求头中error.config.headers.Authorization = 'Bearer ' + res.data.data.token// 3.未完成这次请求,再一次发起请求// 结果我们要return回原本逻辑调用地方 返回一个promise对象return axios(error.config)// 如果刷新的refresh_token也过期了// 判断refresh_token的请求的状态,路径,请求方式} else if (error.response.status === 500 && error.config.url === 'refresh_token请求的路径' && error.config.method === 'put') {//  清除localStorage所有值localStorage.clear()// 跳到登陆页router.replace('/login')}return Promise.reject(error)
})

以上是个人对开发中使用Token的一点总结，如有叙述不当之处请指正，我将及时改正并感谢！

Vue 无感刷新token相关推荐

使用Axios进行无感刷新Token
前言本人在开发项目时,在做登录模块时,参考了oauth2,在用户认证成功后会返回给前端一些令牌相关数据.接下来,再用进行接口请求时,前端根据令牌数据进行一系列的判断,然后做出最好的选择. 举个例子: ...
实现无感刷新token我是这样做的
大家好,我是漫步,今天来分享一个登录常常遇到的难题,即登录超时时间与安全性的纠结问题. 原文: https://juejin.cn/post/6983582201690456071 前言最近在做需求 ...
Laravel6通过jwt(tymon/jwt-auth)实现API用户无感刷新TOKEN
Laravel6通过jwt实现API用户无感刷新TOKEN 1.TOKEN是什么 2.jwt是什么 3.jwt安装&配置 3.1.通过composer安装 3.2.发布配置 3.3.生成加密密 ...
实现无感刷新 token 我是这样做的
原文: https://juejin.cn/post/6983582201690456071 前言最近在做需求的时候,涉及到登录token,产品提出一个问题:能不能让token过期时间长一点,我频繁 ...
关于无感刷新Token，我是这样子做的
本文正在参加「金石计划 . 瓜分6万现金大奖」什么是JWT JWT是全称是JSON WEB TOKEN,是一个开放标准,用于将各方数据信息作为JSON格式进行对象传递,可以对数据进行可选的数字加密, ...
token过期怎么办无感刷新token
(1)可以通过响应拦截器或者全局前置守卫强制跳转登录页 // 全局前置守卫 router.beforeEach((to, from) => {let token = sessionStorage ...
uniapp 实现无感刷新token, 适应大多数项目
不管你是用taro uni 还是vue-cli 或者 react-cli 刷新token这块一通百通本质上都一样我之前讲了一个是在响应拦截哪里做token刷新其实这样做还是不好的,因为这样我 ...
Vue无感刷新当前页面
使用 Vue 选项/组合 Api provide / inject Api 地址,此方法可以实现无感刷新并且不会出现闪烁的空白. 首先在根组件 App.vue 定义这个方法 <template& ...
无感刷新token方法
通常,对于一些需要记录用户行为的系统,在进行网络请求的时候都会要求传递一下登录的token.不过,为了接口数据的安全,服务器的token一般不会设置太长,根据需要一般是1-7天的样子,token过期后 ...

Vue 无感刷新token

Vue 无感刷新token相关推荐

最新文章

热门文章