vue2实现无感刷新token的方式详解
作者：江城开朗的豌豆
在Web应用中,用户需要通过认证和授权才能访问受保护的资源,为了实现认证和授权功能,通常需要使用Token来标识用户身份并验证其权限,本文给大家介绍了vue2实现无感刷新token的方式,需要的朋友可以参考下
引言：
在 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];
// 这里需要调用登录接口，重新获取token
return 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) => {
// 调用登录接口重新获取 Token
axios
.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。这样可以提高应用程序的用户体验和安全性。
以上就是vue2实现无感刷新token的方式详解的详细内容，更多关于vue2无感刷新token的资料请关注脚本之家其它相关文章！