详细聊聊前端如何实现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项目实现会议预约功能(包含某天的某个时间段和某月的某几天)
这篇文章主要介绍了vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
详解element-ui中el-select的默认选择项问题
这篇文章主要介绍了详解element-ui中el-select的默认选择项问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了vue使用echarts实现中国地图和点击省份进行查看功能,本文通过实例代码给大家详细讲解，对vue echarts 中国地图相关知识感兴趣的朋友一起看看吧2022-12-12
这篇文章主要介绍了Vue 表单输入绑定v-model，v-model指定可以实现表单值与属性的双向绑定。即表单元素中更改了值会自动的更新属性中的值，属性中的值更新了会自动更新表单中的值 ，下面一起进入文章来哦姐文章详情内容2021-10-10
Vite是一款非常轻量级的Web开发框架，它可以帮助开发者快速搭建一个开发环境。Vite搭建的开发环境可以提供更快的编译速度，更少的配置，更好的性能和更多的开发者友好性，使开发者可以更快地构建出功能强大的Web应用程序。2023-02-02
这篇文章主要为大家详细介绍了vue实现简单loading进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
这篇文章主要介绍了vue中如何动态添加样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了Vue中emit事件无法触发的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最近在开发移动端项目，通过向左滑动出现删除按钮，点击即可删除，怎么实现这个功能呢，接下来小编给大家带来实例代码帮助大家学习vue项目实现左滑删除功能，感兴趣的朋友跟随小编一起看看吧2021-05-05
页面刷新白屏其实是因为vuex引起的,由于刷新页面vuex数据会丢失,这篇文章主要给大家介绍了关于vue3动态路由刷新出现空白页的原因与最优解的相关资料,需要的朋友可以参考下2023-11-11
最新评论