详细聊聊前端如何实现token无感刷新(refresh_token)
关于无感刷新的理解:
实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新token的ajax,获取最新的token进行覆盖,让用户感受不到token已经过期,今天写了一个简陋的demo,给大家提供一个参考
下面是关于使用vuex来实现的写法
步骤:
1.先搭好axios骨架,以及请求拦截器与响应拦截器
2.再封装好ajax的接口,一个获取token的,一个需要token发送ajax的(获取用户信息等)
3.创建一个vuex的模块并注册,用于处理本次demo的数据存储,发送ajax等
4.创建好两个页面配置好路由,用于模拟登录以及跳转页
5.测试, 可直接在localStorage里对存储的token进行修改并刷新页面
登录页
登录后发送ajax获取token信息,并跳转到首页,获取用户信息
跳转页---首页
报错
Vuex中代码
axios工具函数(请求拦截器与响应拦截器)
---请求拦截器
核心代码 -- 响应拦截器
到此为止,大概的步骤差不多完结了,下面是直接使用localStorage不使用vuex的写法
登录页
跳转页
axios工具函数
--请求拦截器
--响应拦截器
写的比较简陋,好些都没写,比如路由守卫等,望见谅 ,大概的核心代码就这些
总结
到此这篇关于前端如何实现token无感刷新(refresh_token)的文章就介绍到这了,更多相关前端token无感刷新(refresh_token)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了VUE饿了么树形控件添加增删改功能的示例代码，非常具有实用价值，有兴趣的可以了解一下2017-10-10
这篇文章主要介绍了vue脚手架及vue-router基本使用，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
今天小编就为大家分享一篇Vue退出登录时清空缓存的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue中的h函数使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要为大家介绍了Vue配置环境变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
Vue 实时监听窗口变化 windowresize的两种方法
这篇文章主要介绍了Vue 实时监听窗口变化 windowresize的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
在日常开发中,Vue 项目中的表单布局和样式优化是一个重要的环节,通过合理的布局与美观的样式设计,不仅可以提升用户体验,还能增加页面的实用性和观赏性,本文将总结几个常见的表单和表格布局优化的技巧,需要的朋友可以参考下2024-10-10
在开发Vue.js应用时,Vue.js Devtools是一个不可或缺的调试工具,然而,有时我们可能会遇到“Vue.js not detected”的提示,这意味着Vue.js Devtools未能成功识别和连接到我们的Vue应用,本文将详细解析这个问题,并提供相应的解决步骤与代码示例,需要的朋友可以参考下2024-01-01
本文主要介绍了vue中v-if失效原因及解决方法,一般v-if失效都是和绑定变量有关,下面就来具体介绍一下,感兴趣的可以了解一下2023-09-09
Vue3中无法为el-tree-select设置反选问题解析
这篇文章主要介绍了Vue3中无法为el-tree-select设置反选问题分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
最新评论