React umi框架局部请求拦截器

简介: React umi框架局部请求拦截器

创建server.tsx文件

import axios from 'axios';
import { history, Link } from 'umi';
import { Alert, Space } from 'antd';
const instance = axios.create({
  baseURL: '/api',
});
// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 添加 token
    const token =localStorage.getItem("token")
    console.log('token :>> ', token);
    if (token) {
      config.headers.Authorization = ` ${token}`;
      console.log('config.headers.Authorization :>> ', config.headers.Authorization);
  }else{
    history.push('/login')
  }
  // console.log('config :>> ', config);
    return config;
  },
  error => {
    // 处理请求错误
    return Promise.reject(error);
  }
);
export default instance;

login.tsx文件中,引入调用,触发拦截器

import React from 'react'
import "./login.less"
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import axiosed from "@/pages/server"
import { history } from 'umi'
export default function Login() {
    const onFinish = async (values: any) => {
        console.log('Received values of form: ', values);
        let { data } = await axiosed.post("http://localhost:3020/login", values)
        if (data.code == 200) {
            localStorage.setItem("token",data.token)
            history.push({ pathname: "/home", query: { id: "1" }, state: { con: "你好" } })
        }
        console.log('data :>> ', data.token);
    };
相关文章
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
73 9
|
20天前
|
存储 前端开发
在React框架中,如何使用对象来管理组件的状态
在React中,组件状态通过`state`对象管理,利用`setState`方法更新状态。状态变化触发组件重新渲染,实现UI动态更新。对象结构清晰,便于复杂状态管理。
|
29天前
|
开发框架 前端开发 JavaScript
React 框架的优点和缺点是什么?
React框架作为当前主流的前端开发框架之一,具有诸多优点,同时也存在一些缺点
|
29天前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么?
React框架和Vue框架都是目前非常流行的前端JavaScript框架,它们在很多方面存在区别
|
29天前
|
移动开发 前端开发 JavaScript
React框架
React是一个用于构建用户界面的JavaScript库,由Facebook开发并于2013年开源,目前在前端开发领域得到了广泛的应用。
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
25天前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
31 0
|
2月前
|
前端开发 JavaScript UED
构建现代Web应用:使用React框架打造单页面应用
【10月更文挑战第9天】构建现代Web应用:使用React框架打造单页面应用
|
2月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
3月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
59 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求