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

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

前言

个人开源的leno-admin后台管理项目,前端技术栈:reactHooksant-design;后端技术栈:koamysqlredis,整个项目包含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第一版完成并发布;

相关推荐
NeverSettle_18 小时前
2025前端网络相关知识深度解析
前端·javascript·http
JarvanMo18 小时前
Flutter. Draggable 和 DragTarget
前端
练习时长一年18 小时前
后端接口防止XSS漏洞攻击
前端·xss
muchu_CSDN18 小时前
谷粒商城项目-P16快速开发-人人开源搭建后台管理系统
前端·javascript·vue.js
Bye丶L18 小时前
AI帮我写代码
前端·ai编程
PuddingSama18 小时前
Android 高级绘制技巧: BlendMode
android·前端·面试
Cache技术分享18 小时前
186. Java 模式匹配 - Java 21 新特性:Record Pattern(记录模式匹配)
前端·javascript·后端
卸任18 小时前
Electron运行环境判断(是否在虚拟机中)
前端·react.js·electron
叫我詹躲躲18 小时前
前端竟能做出这种专业医疗工具?DICOM Viewer 医学影像查看器
前端·javascript·vue.js
ze_juejin18 小时前
为什么说vue比Angular轻巧
前端