双token时前端access_token的换取

最新推荐文章于 2024-04-19 16:09:50 发布

写Bug的大雄

最新推荐文章于 2024-04-19 16:09:50 发布

阅读量962

点赞数

分类专栏： vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_64344940/article/details/121534748

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该博客详细介绍了如何在Vue项目中使用axios库进行API请求，包括设置基础URL、超时处理、全局loading、错误处理以及针对401未授权情况下的token刷新机制。在遇到401错误时，通过刷新token实现会话延续，并在刷新成功后重新发送被拦截的请求。

摘要由CSDN通过智能技术生成

import axios from 'axios';
import qs from 'qs';
import router, {
  resetRouter
} from '../router';
import {
  Loading,
  Message
} from 'element-ui';
import * as local from '@/utils/localStorage.js';

// 接口请求个数
let requestCount = 0;
// 是否正在刷新token
let isRefreshing = false;
// 重新请求的接口
let requests = [];
let loading;

function showFullScreenLoading () {
  if (requestCount === 0) {
    loading = Loading.service({
      lock: true,
      text: '加载中……',
      background: 'rgba(0, 0, 0, 0.7)'
    });
  }
  requestCount++;
}

function tryHideFullScreenLoading () {
  if (requestCount <= 0) return;
  requestCount--;
  if (requestCount === 0) {
    loading.close();
  }
}

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000
});

// 换取新的token值
export function refreshToken (data) {
  return service({
    //填写换取新access_token的地址
    url: 'oauth/token',
    //method，data，auth等参数的值根据自己接口来定
    method: 'post',
    data: qs.stringify(data),
    auth: {
      username: '',
      password: ''
    }
  });
}

service.interceptors.request.use(function (config) {
  // 在发送请求之前获取token是否存在
  var token = local.getToken();
  if (token) {
    config.headers.Authorization = 'Bearer ' + token;
  }
  //显示loading
  showFullScreenLoading();
  return config;
}, function (error) {
  // 抛出错误
  return Promise.reject(error);
});

service.interceptors.response.use(function (response) {
  //关闭loading
  tryHideFullScreenLoading();
  return response;
}, function (error) {
  if (error.message.includes('timeout')) {
    if (!window.timeoutTip) {
      Message.error('连接超时');
      window.timeoutTip = 1;
    }
  }
  if (error && error.response) {
    //判断当前是否换取token的接口
    if (error.response.status === 401 && error.response.config.url.indexOf('oauth/token') < 0) {
      const config = error.response.config;
      if (!isRefreshing) {
        isRefreshing = true;
        const refreshData = {
          grant_type: 'refresh_token',
          refresh_token: local.getRefreshToken()
        };
        return refreshToken(refreshData).then(res => {
          if (res.status === 200) {
            local.setToken(res.data.access_token);
            local.setRefreshToken(res.data.refresh_token);
            // 重置配置
            config.headers.Authorization = 'Bearer ' + res.data.access_token;
            requests.forEach(cb => cb(res.data.access_token));
            requests = [];
            isRefreshing = false;
            tryHideFullScreenLoading();
            return service(config);
          }
        }).catch(() => {
          Message.error('您的登录已经超时或者在另一个设备登录，您被迫下线');
          local.clearLocalStorage();
          //因为项目有账号权限，需要重置路由
          resetRouter();
          router.push({
            path: '/login'
          });
          isRefreshing = false;
          tryHideFullScreenLoading();
        });
      } else {
        return new Promise((resolve) => {
          // 将resolve放进队列，用函数保存，token刷新后执行
          requests.push((token) => {
            config.headers.Authorization = 'Bearer ' + token;
            resolve(service(config));
          });
          tryHideFullScreenLoading();
        });
      }
    }
  }
  tryHideFullScreenLoading();
  return Promise.reject(error);
});

export default service;