taro移动端项目配置api拦截器

前言

个人开源的leno-admin后台管理项目，前端技术栈：reactHooks、ant-design；后端技术栈：koa、mysql、redis，整个项目包含web端、electron客户端、mob移动端、template基础模板，能够满足你快速开发一整套后台管理项目；如果你觉得不错，就为作者点个✨star✨吧，你的支持就是对我最大的鼓励；

演示地址

文档地址

源码github地址

事因

最近在闲暇时间之余，便开始着手于开发我自己个人的开源项目leno-admin的移动端，包含移动端h5页面和微信小程序，也遇到了不少taro的坑，在api拦截上，基于原先web端的api拦截修改了下，适应移动端项目；

代码展示

tsx 复制代码

// 首先你需要安装taro-axios；

import axios, { type Method } from "taro-axios";
import useStore from "~/store";
import Taro from "@tarojs/taro";

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

// 请求拦截器
instance.interceptors.request.use(
  (response: any) => {
    const {
      useUserStore: { token },
    } = useStore();

    // token配置请求头
    if (!response.headers?.authorization && token) {
      response.headers.Authorization = `Bearer ${token}`;
    }

    return response;
  },
  (error) => Promise.reject(error)
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    httpMessageHandle(response.data);
    return response;
  },
  (error) => {
    const { data } = error.response;
    httpMessageHandle(data, true);
    return Promise.reject(error);
  }
);

const httpMessageHandle = (
  data: { code: any; message: any },
  isError = false
) => {
  // userStore
  const {
    useGlobalStore: { logout, changeLogout },
    useUserStore: { removeLocalToken },
  } = useStore();
  /** 错误集中提示
   * 400 => 表示前端传参可能出现错误
   * 401 => 权限过期
   * 403 => 无访问权限
   * 500 => 服务器拒绝请求
   */
  switch (data && data.code) {
    case 400:
      Taro.showToast({
        title: `${data.message}`,
        icon: "error",
      });
      break;
    case 401:
      if (logout) {
        changeLogout(false);
        Taro.showModal({
          title: "系统提示",
          content: "登录状态已过期，您可以继续留在该页面，或者重新登录",
          cancelText: "取消",
          confirmText: "重新登录",
          success: function (res) {
            if (res.confirm) {
              changeLogout(true);
              removeLocalToken("");
              window.location.hash = "/login";
            } else if (res.cancel) {
              changeLogout(true);
            }
          },
        });
      }
      break;
    case 403:
      Taro.showToast({
        title: `${data.message}`,
        icon: "error",
      });
      break;
    case 500:
      Taro.showToast({
        title: `${data.message}`,
        icon: "error",
      });
      break;

    default:
      isError &&
        Taro.showToast({
          title: "未知错误，请联系管理人员",
          icon: "error",
        });
      break;
  }
};

结语

leno-admin-mobx因为个人原因，零零散散写了有一阵子了，还在开发中，平时生活工作中琐事烦心，导致减少了在leno-admin上投入的时间，接下来，需要全力以赴将leno-admin-mob第一版完成并发布；