通用axios封装api,含用户登录与csrftoken封装

// 初道封装
const apiConfig = {
  httpCode: {
    400: 'Incorrect request parameter.',
    401: 'Insufficient permission. Please log in again.',
    403: 'The server rejects the access.',
    404: 'The requested resource is not found.',
    500: 'Internal server error',
    501: 'The method used in the request is not supported by the server.',
    502: 'Gateway error.',
    504: 'Gateway timeout',
  },
  tokenGetting: false,
  apiTasks: [],
  loading: null,
  loadingCount: 0,
  errMsg: '',
};

function getLocal(lname) {
  return sessionStorage.getItem(lname) || '';
}

function setLocal(lname, lvalue) {
  return sessionStorage.setItem(lname, lvalue || '');
}

function delLocal(lname) {
  return sessionStorage.removeItem(lname);
}

function getToken() {
  return getLocal(ConfigMain.token.user.localName);
}

export function setLocalToken(cvalue = '', ctime = '') {
  if (cvalue && ctime) {
    setLocal(ConfigMain.token.user.localName, cvalue);
    setLocal(ConfigMain.token.user.localTime, Date.now() + ctime);
  } else {
    delLocal(ConfigMain.token.user.localName);
    delLocal(ConfigMain.token.user.localTime);
  }
}

function checkToken() {
  if (getToken() && getLocal(ConfigMain.token.user.localTime) && Date.now() < +getLocal(ConfigMain.token.user.localTime)) {
    return true;
  } else {
    return false;
  }
}

function getCsrfToken() {
  return getLocal(ConfigMain.token.csrf.localName);
}

function setLocalCsrfToken(cvalue = '', ctime = '') {
  if (cvalue && ctime) {
    setLocal(ConfigMain.token.csrf.localName, cvalue);
    setLocal(ConfigMain.token.csrf.localTime, Date.now() + ctime);
  } else {
    delLocal(ConfigMain.token.csrf.localName);
    delLocal(ConfigMain.token.csrf.localTime);
  }
}

function apiCsrfToken(url) {
  return axios({
    method: 'get',
    url,
  });
}

function checkCsrfToken() {
  if (getCsrfToken() && getLocal(ConfigMain.token.csrf.localTime) && Date.now() < +getLocal(ConfigMain.token.csrf.localTime)) {
    return true;
  } else {
    return false;
  }
}

function reLogin() {
  window.location.href = ConfigMain.token.user.href;
}

function showLoad() {
  if (apiConfig.loadingCount === 0) {
    apiConfig.loading = Loading.service({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)',
    });
  }
  apiConfig.loadingCount++;
}

function closeLoad() {
  apiConfig.loadingCount--;
  if (apiConfig.loadingCount === 0 && apiConfig.loading) {
    apiConfig.loading.close();
  }
}

function showMessage(message) {
  if (message) {
    Message({
      message,
      type: 'error',
    });
  }
}

function getMsg(message) {
  if (ConfigMain.message.api && message) {
    return message;
  } else {
    return '';
  }
}

// 主axios处理函数
export const instance = axios.create({
  timeout: 300 * 1000, // 超时时间300s
  baseURL: ConfigMain.baseURL,
});
instance.defaults.headers.post['Content-Type'] = 'application/json';
instance.setCsrfToken = (rvalue, rtime) => {
  instance.defaults.headers[ConfigMain.token.csrf.name] = rvalue;
  setLocalCsrfToken(rvalue, rtime);
};

// 请求拦截器
instance.interceptors.request.use(
  config => {
    if (config.loading) {
      showLoad();
    }
    if (config.baseURL) {
      config.url = config.baseURL + config.url;
    }
    if (checkToken() || !config.user) {
      config.headers[ConfigMain.token.user.name] = getToken();
    } else {
      reLogin();
      return Promise.reject();
    }

    if (checkCsrfToken() || !config.csrf) {
      config.headers[ConfigMain.token.csrf.name] = getCsrfToken();
    } else {
      if (!apiConfig.tokenGetting) {
        apiConfig.tokenGetting = true;
        apiCsrfToken(config.baseURL + config.csrfURL)
          .then(res => {
            if (res && res.data && res.data.data && res.data.data.csrfToken && res.data.resultCode === 0) {
              instance.setCsrfToken(res.data.data.csrfToken, res.data.data.csrfTime);
              apiConfig.apiTasks.forEach(reLoad => reLoad(res.data.data.csrfToken));
              apiConfig.apiTasks = [];
              apiConfig.tokenGetting = false;
            }
          })
          .finally(() => {
            if (apiConfig.tokenGetting) {
              apiConfig.tokenGetting = false;
              apiConfig.apiTasks = [];
            }
          });
      }

      const reRequest = new Promise(resolve => {
        apiConfig.apiTasks.push(token => {
          config.headers[ConfigMain.token.csrf.name] = token;
          resolve(config);
        });
      });
      return reRequest;
    }
    return Promise.resolve(config);
  },
  error => Promise.reject(error),
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    if (response.config.loading) {
      closeLoad();
    }
    if (response && response.status === 200) {
      return Promise.resolve(response.data);
    } else {
      apiConfig.errMsg = getMsg(response || response.data.message);
      showMessage(apiConfig.errMsg);
      return Promise.reject(apiConfig.errMsg);
    }
  },
  error => {
    if (error.config.loading) {
      closeLoad();
    }
    const { response } = error;
    if (response) {
      let statusCode = response.status;
      apiConfig.errMsg = getMsg(statusCode in apiConfig.httpCode ? apiConfig.httpCode[statusCode] : response.data.message);
      showMessage(apiConfig.errMsg);
      if (statusCode === 406) {
        setLocalCsrfToken();
      } else if (statusCode === 401) {
        setLocalToken();
        setLocalCsrfToken();
        reLogin();
      }
      return Promise.reject(apiConfig.errMsg);
    } else {
      apiConfig.errMsg = getMsg('Request canceled');
      return Promise.reject(apiConfig.errMsg);
    }
  },
);



// 二道封装
const $api = (url, data, config = {}) => {
  const apiConfig = {
    method: 'post',
    baseURL: ConfigMain.baseURL,
    csrfURL: ConfigMain.token.csrf.url,
    user: ConfigMain.token.user.status,
    csrf: ConfigMain.token.csrf.status,
    loading: true,
    ...config,
  };
  return instance({
    url,
    data,
    ...apiConfig,
  });
};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿赛工作室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值