vue2实现无感刷新token

 🎬 江城开朗的豌豆:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

 📝 个人网站 :《 江城开朗的豌豆🫛 》 

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

📘 引言:

📟 安装依赖

📟 创建 Axios 实例并做请求封装

📟 使用封装的 Axios 实例

📘 写在最后


📘 引言:

Web 应用中,用户需要通过认证和授权才能访问受保护的资源。为了实现认证和授权功能,通常需要使用 Token 来标识用户身份并验证其权限。但是,Token 有时限制其有效期,以确保安全性。

Token 过期时,应用程序会返回一个 401(未授权)错误,提示用户重新登录或刷新页面。这可能会影响用户体验和流程,并可能导致应用程序的性能问题。

因此,为了提高应用程序的用户体验和可靠性,通常会使用无感刷新 Token 的技术来自动刷新过期的 Token。这样,即使 Token 过期,用户也可以继续使用应用程序而不会收到任何干扰。此外,无感刷新 Token 还可以提高应用程序的安全性和稳定性,因为它可以有效地防止 Token 被恶意利用或攻击。

需要注意的是,在实现无感刷新 Token 的过程中,需要注意保护用户数据的安全性,并遵守相关的安全标准和法律法规。同时,还需要根据应用程序的需求和后端接口的设计来调整具体的实现方式。

📟 安装依赖

现在我们开始写入vue2前端代码

首先,确保已经安装了 Axios 和相关的依赖

npm install axios

📟 创建 Axios 实例并做请求封装

src/utils/request.js 文件中创建一个 Axios 实例,并进行相关配置。

import axios from "axios";const service = axios.create({baseURL:process.env.NODE_ENV !== "production"? process.env.VUE_APP_BASE_API: process.env.VUE_APP_BASE_API_RUL,  timeout: 10000, // 超时时间
});// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
service.interceptors.request.use((config) => {const token = window.localStorage.getItem("token");token && (config.headers.Authorization = token);config.headers["Content-Type"] = "application/json;charset=utf-8";config.headers["Authorization"] = "Bearer " + token; // 设置请求头  return config;},(error) => {return Promise.reject("网络异常,请稍后再试" + error);}
);// response 拦截器
// 可以在接口响应后统一处理结果
service.interceptors.response.use((response) => {if (response.data.code == 401) {let userInfo = {};userInfo.account =  process.env.VUE_APP_TOKEN.split(",")[0];userInfo.password =  process.env.VUE_APP_TOKEN.split(",")[1];// 这里需要调用登录接口,重新获取tokenreturn refreshToken(userInfo).then((newToken) => {// 更新本地存储的 Token       localStorage.setItem("token", newToken);// 重新发送原请求return service(response.config);});}let res = response.data;// 兼容服务端返回的字符串数据if (typeof res === "string") {res = res ? JSON.parse(res) : res;}return res;},(error) => {return Promise.reject("网络异常,请稍后再试" + error);}
);
function refreshToken(userInfo) {return new Promise((resolve, reject) => {// 调用登录接口重新获取 Tokenaxios  .post(`${process.env.VUE_APP_BASE_API}/pc_admin/login`, {    ...userInfo,}).then((response) => {resolve(response.data.data.token);}).catch((error) => {reject(error);});});
}export default service;

📟 使用封装的 Axios 实例

在需要发送请求的地方引入封装的 Axios 实例,并使用它来发送请求。

//sever.js
import request from "./http";
// 测试接口
export function getListApi(params) {return request({url: "/pc_admin/article", method: "get",params: params,});
}

📘 写在最后

        通过上述代码,在使用 Axios 发送请求时,会自动处理 Token 过期的情况,并进行无感刷新 Token。这样可以提高应用程序的用户体验和安全性。

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/703827.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(上)

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢…

携程token算法分析

声明 本文以教学为基准、本文提供的可操作性不得用于任何商业用途和违法违规场景。 本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害不承担责任。 如有侵权,请联系我进行删除。 这里只是我分析的分析过程,以及一些重要点的记录…

[云原生] k8s中kubectl陈述式资源管理

一、管理k8s核心资源的两种基本方法 陈述式资源管理方法 --主要依赖命令行工具kubectl进行管理 优点 可以满足90%以上的使用场景 对资源的增、删、查操作比较容易 缺点 命令冗长,复杂,难以记忆 特定场景下,无法实现管理需求 对资源的修改…

每日汇评:英镑可能走高,而1.2650支撑位保持不变

英镑/美元上周收于正值区域; 1.2650是该货币对的关键近期支撑位; 如果市场情绪恶化,该货币对的上涨空间可能仍然有限; 英镑/美元利用围绕美元的广泛抛售压力,自 1 月初以来首次录得周涨幅。 周一早盘该货币对稳定在 1.…

TF-A之供应链威胁模型分析

目录 一、简介 二、TF-A 概述 2.1、TF-A 存储库 2.2、外部依赖 2.3、附加二进制文件 2.4、TF-A工具链 2.5、基础设施 三、TF-A

Premiere企业发展历程公司历史回顾视频制作pr时间线模板

企业发展历程公司历史回顾视频制作PR时间线模板mogrt。 项目特点:色彩控件,适用于任何字体,包含视频帮助,适用于Premiere Pro 2021及以上版本。 更多PR资源下载:https://prmuban.com/37916.html

java环境搭建

1.jdk下载安装 下载 https://www.oracle.com/java/technologies/downloads/ jdk21 安装完成 java.exe是执行程序 javac.exe是编译工具 配置JAVA_HOME 环境变量 java环境变量设为变量JAVA_HOME 加上bin,以后只用更改JAVA_HOME地址即可 2.idea安装 下载 https://www.jet…

UDP套接字使用connect函数

在Linux环境下,UDP套接字可以使用connect函数。虽然UDP是无连接的协议,但是使用connect函数可以为UDP套接字设置一个默认的目标地址。 这样做有几个好处: 减少发送数据时的参数:当你使用connect函数为UDP套接字设置了一个目标地址…

Python 开发转 Java 简易路线 - 完结

有了 Python 开发基础,Java 的内容都可以快速过一遍,复杂地方跟着写一遍。 个人博客(可参考):https://itnxd.eu.org/ 一、基础 1、Java 基础:尚硅谷 - Java基础 全部快速过一遍, 2、数据库&a…

动态规划(算法竞赛、蓝桥杯)--最详细的01背包DP问题滚动数组优化

1、B站视频链接&#xff1a;E08【模板】背包DP 01背包_哔哩哔哩_bilibili 题目链接&#xff1a;[USACO07DEC] Charm Bracelet S - 洛谷 #include <bits/stdc.h> using namespace std; const int N3410,M13000; int n,m; int d[N],w[N],f[N][M];//价值、体积、状态数组 …

Linux 软链接与硬链接

目录 创建软链接 创建硬链接 删除软链接 软链与硬链区别 创建软链接 软链接是一个指向另一个文件或目录的引用&#xff0c;类似于Windows系统中的快捷方式。 ln -s [目标文件路径] [链接文件名] 例如&#xff0c;要在当前目录下创建一个名为link_file的软链接&#xff0c…

Odoo系统安装部署并结合内网穿透实现固定域名访问本地ERP系统

文章目录 前言1. 下载安装Odoo&#xff1a;2. 实现公网访问Odoo本地系统&#xff1a;3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件&#xff0c;是一个一站式全功能ERP及电商平台。 开源性质&#xff1a;Odoo是一个开源的ERP软件&#xff0c;这意味着企…

AP5219 DC-DC降压恒流芯片 2.5A 全亮 半亮 摩托电动车灯IC

产品描述 AP5219 是一款 PWM工作模式, 高效率、外 围简单、内置功率管&#xff0c;适用于 5V&#xff5e;100V 输入的高 精度降压 LED 恒流驱动芯片。输出最大功率可达 25W&#xff0c;最大电流 2.5A。 AP5219 可实现全亮/半亮功能切换&#xff0c;通过 MODE 切换&#x…

Docker基础(二)

文章目录 1. 可视化工具2. Docker镜像详解2.1 镜像commit 3. 容器数据卷3.1 使用数据卷3.2 安装mysql实操案例3.3 Dockerfile挂载数据卷3.4 具名挂载和匿名挂载3.5 数据卷容器 4. DockerFile4.1 构建一个自己的centos4.2 编写DockerFile步骤 5. 发布镜像5.1 共有仓库5.2 私有仓…

代码随想录训练营第41天| 卡码网46. 携带研究材料、416. 分割等和子集

46. 携带研究材料 题目链接&#xff1a;题目页面 (kamacoder.com) 二维dp数组&#xff1a; import java.util.*; public class Main{public static void main(String[] args) {Scanner sc new Scanner(System.in);int m sc.nextInt();int n sc.nextInt();int[] space ne…

如何通过信息化系统降低连锁品牌企业的财务成本

最近身边几个做连锁品牌的朋友问&#xff0c;能不能通过信息化系统降低连锁管理门店的财务成本&#xff0c;让整体的运营合法合规&#xff0c;降低税收成本。今天商淘云和大家分享如何通过信息化系统降低连锁管理门店的财务成本。 传统的连锁门店是大家自动核对账目&#xff0c…

HttpServlet详解

Servlet与HttpServlet详解 一、Servlet概述 Servlet&#xff08;Server Applet&#xff09;是Java Servlet API中定义的一个接口&#xff0c;用于扩展Web服务器的功能。Servlet是一个运行在Web服务器或应用服务器上的Java程序&#xff0c;它可以动态地生成Web页面或其他类型的…

【云原生】Spring Cloud Gateway的底层原理与实践方法探究

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &#x1f680; 本…

Leetcode. 739 每日温度

题目信息 LeetoCode地址: . - 力扣&#xff08;LeetCode&#xff09; 题目理解 题意很好理解&#xff0c;找到比每日温度更高的温度的已过天数的偏移量。如果找不到&#xff0c;则设为0。 最直观的想法是&#xff0c;从每一天开始向后一天一天找&#xff0c;直到找到更高温…

fly-barrage 前端弹幕库(2):弹幕内容支持混入渲染图片的设计与实现

如果弹幕内容只支持文字的话&#xff0c;只需要借助 canvas 绘图上下文的 fillText 方法就可以实现功能了。 但如果想同时支持渲染图片和文字的话&#xff0c;需要以下几个步骤&#xff1a; 设计一个面向用户的数据结构&#xff0c;用于描述弹幕应该渲染哪些文字和图片&#x…