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第一版完成并发布;

相关推荐
拾光拾趣录3 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00004 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl5 分钟前
深度剖析Kafka读写机制
前端
FogLetter6 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan6 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan7 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan9 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录9 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee9 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化
然我10 分钟前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html