解决(前后端分离)umi.js antd-pro v5无法发送请求头token问题

1,使用 umi-request 替换 umi 的配置。
安装umi-request

npm i umi-request
//import { request } from 'umi'; // -- 默认请求无法进行header token 认证
import request from 'umi-request';  // -- 新版设置request请求拦截

// request拦截器, 改变url 或 options.
request.interceptors.request.use((url, options) => {
  let token = localStorage.getItem('token');
  if (null === token) {
      token = '';
  }
  const authHeader = { Authorization: `Bearer ${token}` };
  return {
    url: url,
    options: { ...options, interceptors: true, headers: authHeader },
  };
});

2,前端完整代码

//import {request} from 'umi'
import request from 'umi-request';

// request拦截器, 改变url 或 options.
request.interceptors.request.use((url, options) => {
  let token = localStorage.getItem('token');
  if (null === token) {
      token = '';
  }
  const authHeader = { Authorization: `${token}` };
  return {
    url: url,
    options: { ...options, interceptors: true, headers: authHeader },
  };
});

export default request;
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
umi是一款基于React的可扩展企业级前应用框架,它提供了一套完整的开发和构建工具链,可以帮助开发者快速搭建复杂的单页面应用和多页面应用。umi的设计理念是约定大于配置,通过约定的文件结构可以自动生成路由、动态加载页面和组件等,同时还支持插件机制,可以轻松地集成各种功能和扩展。umi还提供了一些常用的功能和工具,如国际化、权限控制、数据模拟等,方便开发者快速开发高质量的前应用。 antd-mobile是一个基于React和antd设计体系的移动UI组件库,它提供了一系列优雅美观的组件,如按钮、导航栏、列表、输入框等,可以帮助开发者快速构建优质的移动用户界面。antd-mobile的组件风格简约而不简单,同时还支持主题定制和样式覆盖,开发者可以根据自己的需要进行自定义。antd-mobile还提供了一些常用的功能和工具,如表单校验、图片裁剪、手势操作等,方便开发者解决一些常见的问题umi和antd-mobile可以很好地配合使用,umi提供了一套完整的开发框架和工具链,而antd-mobile提供了美观实用的移动UI组件,开发者可以通过umi搭建整个项目的结构和配置,然后使用antd-mobile的组件来构建用户界面。umi和antd-mobile都是社区广泛使用和维护的项目,拥有强大的生态系统和活跃的社区支持,开发者在使用过程中可以获得良好的技术支持和文档资源,提高开发效率和质量。总之,umi和antd-mobile是一对强力组合,可以帮助开发者快速构建优质的企业级移动应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值