vue中Axios添加拦截器刷新token的实现方法

目录
  • 1. Axios基本用法:
  • 2. Axios基本封装用法:
  • 3. 添加拦截器的用法
  • 4. 注意事项:

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. 注意事项:

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

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

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

到此这篇关于vue中Axios添加拦截器刷新token的实现方法的文章就介绍到这了,更多相关Axios添加拦截器刷新token内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue下axios拦截器token刷新机制的实例代码

    //创建http.js文件,以下是具体代码: //引入安装的axios插件 import axios from 'axios' import router from '@/router'; import Vue from 'vue' const qs = require("qs"); let _this = new Vue(); let isLock = false; let refreshSubscribers = []; //判断token是否过期 function isToken

  • vue中Axios添加拦截器刷新token的实现方法

    目录 1. Axios基本用法: 2. Axios基本封装用法: 3. 添加拦截器的用法 4. 注意事项: Axios是一款网络前端请求框架,基本用法如下: 1. Axios基本用法: const response = await Axios.create({ baseURL: "https://test.api.com", headers: { 'Content-Type': 'application/json', }, }).post<RequestResponse>(

  • Vue 拦截器对token过期处理方法

    最近在做的一个项目,需要每个http请求下 都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. Vue.http.interceptors.push(function (request, next) {//拦截器设置请求token // sessionStorage.getItem("tokenUrl"); request.headers.set('token', sessionStorage.getItem("tok

  • Vue中axios拦截器如何单独配置token

    在了解到cookie.session.token的作用后学习token的使用 cookie cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session session数据保存在服务端,在内存中开辟空间存储数据,session文件名即sessionID保存在cookie内,随cookie传送到服务端后在服务端匹配session文件 token token是服务端的一种算法,如果登录成功,服务端就会根据算法生成一个字符串,将字符串传递回

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

  • Vue中axios的封装(报错、鉴权、跳转、拦截、提示)

    统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 实现的功能 统一捕获接口报错 : 用的axios内置的拦截器 弹窗提示: 引入 Element UI 的 Message 组件 报错重定向: 路由钩子 基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子 表单序列化: 我这边直接用 qs (npm模块),你有时间也可以自己写 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道 // 可以去了解npm的引入和es6引入

  • vue中axios的封装问题(简易版拦截,get,post)

    第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const token = getCookie('名称')

  • vue中Axios的封装和API接口的管理示例详解

    目录 一.axios的封装 安装 引入 环境的切换 设置请求超时 post请求头的设置 请求拦截 响应的拦截 封装get方法和post方法 axios的封装基本就完成了,下面再简单说下api的统一管理. 2018.8.14更新 我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js

  • 详解vue中axios的使用与封装

    分享下我自己的axios封装 axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save 在src下新建文件夹 service / index.js 接着上代码 import axios from 'axios'; import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示 import router from '..

  • Vue中Axios中取消请求及阻止重复请求的方法

    目录 阻止请求目的: 常见情况: 新建 axios.js 文件 全局 main.js 引入 阻止请求目的: 为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求,从而导致前端向后端重复发送多次请求. 常见情况: PC端:输入框搜素,多次请求接口移动端:移动端很容易造成误操作或多操作请求(移动端没有点击延迟)注意:有Loading遮罩时也有可能发生重复请求 新建 axios.js 文件 import axios from "axios"; // import router fro

  • Vue中axios的基本用法详解

    目录 1.什么是axios? 2.axios的特征 3.axios在使用的时候需要注意的细节 4.axios在vue中的实例运用(留言评论接口) App.vue代码 mian.js代码 1.什么是axios? axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端.简单的理解就是ajax的封装 2.axios的特征 从浏览器中创建 XMLHttpRequest    从 node.js 发出 http 请求    支持 Promise API    拦截请求和响应 

随机推荐