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);
    };
相关文章
|
2月前
|
前端开发 JavaScript 算法
React框架有哪些特点?
【8月更文挑战第28天】React框架有哪些特点?
176 65
|
1天前
|
前端开发 JavaScript UED
构建现代Web应用:使用React框架打造单页面应用
【10月更文挑战第9天】构建现代Web应用:使用React框架打造单页面应用
|
1天前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
25天前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
43 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
1月前
|
前端开发 搜索推荐 API
【Prompt Engineering:ReAct 框架】
ReAct 框架由 Yao 等人(2022)提出,结合大语言模型(LLMs)生成推理轨迹与任务操作,交替进行推理与行动。此框架允许模型与外部环境(如知识库)互动,以动态更新操作计划并处理异常。ReAct 在语言和决策任务上表现优异,提升模型的人类可解释性和可信度。研究显示,ReAct 优于多个基准模型,尤其在结合链式思考时效果最佳。通过实例演示,ReAct 能有效整合内外部信息,优化推理过程。
【Prompt Engineering:ReAct 框架】
|
1月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
39 10
React技术栈-react使用的Ajax请求库实战案例
|
1月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
27 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
24天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
42 4
|
26天前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
25天前
|
前端开发
React页面跳转取消上一个页面的所有请求
React页面跳转时取消上一个页面的所有axios请求,通过axios拦截器设置cancelToken,并在页面跳转时调用cancel函数取消未完成的请求。
15 2