文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中Axios如何添加拦截器刷新token

2023-06-29 04:20

关注

这篇文章将为大家详细讲解有关vue中Axios如何添加拦截器刷新token,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

Axios是一款网络前端请求框架,基本用法如下:

1. Axios基本用法:

        const response = await Axios.create({            baseURL: "https://test.api.com",            headers: {                'Content-Type': 'application/json',            },          }).post<RequestResponse>('/signin', {            user_id: "test_user",            password: "xxx",        });

其中,RequestResponse是返回的数据要解析为的数据类型,如下:

export interface RequestResponse {    data: any;    message: string;    resultCode: number;}

这样,得到的response就是网络请求的结果,可以进行判断处理。

2. Axios基本封装用法:

对Axios进行简单的封装,使得多个网络请求可以使用统一的header等配置。

新建一个工具类,进行封装:

import Axios, { AxiosRequestConfig, AxiosError, AxiosInstance, AxiosResponse } from 'axios'; export const BASE_URL = "https://test.api.com"; export const axiosApi = (): AxiosInstance => {  const instance = Axios.create({    baseURL: BASE_URL,    headers: {       'Content-Type': 'application/json',       Authorization: `${getAccessToken()}`,    },  });      return instance;} const getAccessToken = () => {    // 这里获取本地保存的token    return xxxxx}

然后使用的地方是这样:

const response = await axiosApi().post<RequestResponse>('/signin', {     user_id: "test_user",     password: "xxx",});

3. 添加拦截器的用法

现在我们想再增加个功能,就是调接口时,header里传了token,但是有时候token过期了接口就会返回失败,我们想在封装的地方添加统一处理,如果token过期就刷新token,然后再调接口。

其中token的数据格式及解析方法已知如下:

import * as crypto from 'crypto';import * as jwt from "jsonwebtoken"; export interface TokenData {  userid: string;  exp: number;  iat: number;} export const decodeJWT = function (token: string): TokenData {  if (!token) {    return null;  }  const decoded = jwt.decode(token, { complete: true });  return decoded?.payload;};

如何统一刷新token呢?可以添加拦截器进行处理。把对Axios的封装再改下,添加拦截器:

export const axiosApi = (): AxiosInstance => {  const instance = Axios.create({    baseURL: BASE_URL,    headers: {       'Content-Type': 'application/json',       Authorization: `${getAccessToken()}`,    },  });    // 添加拦截器  instance.interceptors.request.use(    config => {      return refreshToken(config);    },    err => {      return Promise.reject(err)    }  )  return instance;} // 刷新token的方法const refreshToken = async (config: AxiosRequestConfig) => {  const oldToken = getAccessToken();  if (!oldToken) { //如果本地没有token,也就是没登录,那就不用刷新token    return config;  }   const tokenData = decodeJWT(oldToken);//解析token,得到token里包含的过期时间信息  const currentTimeSeconds = new Date().getTime()/1000;   if (tokenData && tokenData.exp > currentTimeSeconds) {    return config; // token数据里的时间比当前时间大,也就是没到过期时间,那也不用刷新  }   // 下面是刷新token的逻辑,这里是调API获取新的token  const response = await signInRefreshToken(tokenData?.userid);  if (response && response.status == 200) {    const { token, refresh_token } = response.data?.data;    // 保存刷新后的token    storeAccessToken(token);    // 给API的header设置新的token    config.headers.Authorization = token;  }  return config;}

经过这样添加了拦截器,如果token没过期,就直接进行网络请求;如果token过期了,那就会调接口刷新token,然后给header设置新的token再进行网络请求。

4. 注意事项:

要注意的一点是,实际应用时,要注意:

刷新token时如果调接口,所使用的网络请求工具不能也使用这个封装的工具,否则就会陷入无限循环,可以使用简单未封装的方式请求。

本例使用的方法,是进行请求前刷新token。也可以使用先调网络请求,如果接口返回错误码表示token过期,则刷新token,再重新请求的方式。

关于“vue中Axios如何添加拦截器刷新token”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯