react umi hook 音频

<think>好的，我现在需要帮助用户解决在React + Umi + Ant Design Pro项目中如何默认给所有请求（除了登录接口）添加JWT认证的问题。首先，我得回忆一下Umi的请求拦截机制。 用户提到除了登录接口外都要带JWT，所以得先确定登录接口的URL路径。通常可能是像`/api/login`这样的路径，我需要提醒用户在配置中正确设置这个例外。 接下来，Umi使用内置的request库，可以通过中间件或拦截器来修改请求。记得在文档中，Umi的request配置可以在`src/app.tsx`中通过`request`属性进行自定义。这里可能需要创建一个请求拦截器，在发送请求前检查是否需要添加Authorization头。 然后，关于如何判断非登录接口，应该在拦截器里检查请求的URL是否不是登录路径。如果是其他请求，就从本地存储（比如localStorage）中获取JWT，并添加到请求头中。 同时，需要考虑JWT的存储位置，通常是登录成功后保存到localStorage或sessionStorage。需要确保在登录接口返回token后正确存储，并在后续请求中读取。 另外，可能还需要处理token过期或无效的情况，比如在响应拦截器中检查401状态码，然后跳转到登录页面。这部分用户虽然没有提到，但可能是一个需要考虑的补充点。 还要注意Umi和Ant Design Pro的版本差异，不同版本可能有不同的配置方式。比如旧版本可能使用umi-request，而新版本可能换了其他库。需要确认当前项目的Umi版本，并参考对应的文档。 最后，需要测试配置是否正确，确保登录接口不带token，其他接口都携带了正确的JWT。可能需要用浏览器的开发者工具查看请求头，或者编写测试用例来验证。 总结步骤应该是：配置请求拦截器，判断URL是否为登录接口，非登录接口添加Authorization头，存储token到本地，处理可能的认证错误。然后把这些步骤用代码示例展示出来，并提醒注意事项，如路径匹配、存储键名一致等。</think>在 React + Umi + Ant Design Pro 中实现全局 JWT 认证，可通过以下步骤实现： --- ### 一、核心实现原理 1. 使用 **Umi 请求中间件**拦截所有请求 2. 通过 **请求拦截器** 自动添加 Authorization 头 3. 通过 **响应拦截器** 处理认证失效场景 4. 使用 **白名单机制** 排除登录接口 --- ### 二、具体实现步骤 #### 1. 创建请求配置文件 在 `src/app.tsx` 中配置（Umi 3+ 标准方式）： ```typescript import { RequestConfig } from 'umi'; const authRoutes = ['/api/login', '/user/login']; // 登录接口白名单 export const request: RequestConfig = { timeout: 10000, errorConfig: {}, middlewares: [], requestInterceptors: [ (url: string, options: any) => { // 判断是否需要添加 token if (!authRoutes.some(path => url.includes(path))) { const token = localStorage.getItem('ACCESS_TOKEN'); if (token) { options.headers = { ...options.headers, Authorization: `Bearer ${token}`, }; } } return { url, options }; }, ], responseInterceptors: [ (response: Response) => { // 处理 401 未授权 if (response.status === 401) { localStorage.removeItem('ACCESS_TOKEN'); window.location.href = '/login'; } return response; }, ], }; ``` --- #### 2. 登录接口处理 在登录页面成功后存储 token： ```typescript // 登录请求示例 import { request } from 'umi'; const handleLogin = async (values) => { try { const res = await request('/api/login', { method: 'POST', data: values, }); if (res.token) { localStorage.setItem('ACCESS_TOKEN', res.token); // 跳转到首页 window.location.href = '/'; } } catch (error) { console.error('登录失败', error); } } ``` --- ### 三、关键注意事项 1. **白名单配置**： - 需根据实际接口路径配置 `authRoutes` - 建议使用正则表达式匹配动态路径 2. **Token 存储**： - 推荐使用 `localStorage` 或 `sessionStorage` - 安全要求高的场景建议配合 `httpOnly` cookies 使用 3. **跨域处理**： - 确保服务端配置 `Access-Control-Allow-Headers: Authorization` 4. **异常处理**： ```typescript // 可在响应拦截器添加统一错误处理 if (response.status !== 200) { throw new Error(`请求错误 ${response.status}`); } ``` --- ### 四、优化建议 1. **Token 自动续期**： ```typescript // 在响应拦截器中检查新 token const newToken = response.headers.get('X-Refresh-Token'); if (newToken) { localStorage.setItem('ACCESS_TOKEN', newToken); } ``` 2. **请求重试机制**： ```typescript let retryCount = 0; if (response.status === 401 && retryCount < 3) { // 尝试刷新 token 后重新请求 retryCount++; } ``` --- ### 五、版本适配说明 1. **Umi 2.x**： 需使用 `umi-request` 单独配置 ```javascript import { extend } from 'umi-request'; const request = extend({ /* 配置 */ }); ``` 2. **Ant Design Pro 4.x+**： 建议使用 `@ant-design/pro-utils` 的 `useRequest` hook --- 通过以上配置，所有非白名单请求都会自动携带 JWT，系统会自动处理认证失效场景。建议配合单元测试验证拦截器行为，可使用 Jest 模拟请求场景进行验证。

以下是UMI React项目技术介绍的具体写法： 1. 使用UMI框架搭建项目 UMI是一个基于React的企业级开发框架，可以快速搭建React项目，提供了路由、插件、约定等功能，大大提高了开发效率。 安装UMI： ``` $ npm install -g umi ``` 创建UMI项目： ``` $ mkdir myapp && cd myapp $ yarn create umi ``` 2. 使用Ant Design UI组件库 Ant Design是一个企业级UI组件库，提供了丰富的组件和样式，可以快速构建美观、易用的界面。 安装Ant Design： ``` $ yarn add antd ``` 使用Ant Design： 在页面中引入Ant Design的组件即可，例如： ``` import { Button } from 'antd'; function MyButton() { return <Button>Click me</Button>; } ``` 3. 使用Redux状态管理 Redux是一个状态管理库，可以统一管理应用程序的状态，方便进行数据共享和状态更新。 安装Redux： ``` $ yarn add redux react-redux ``` 使用Redux： 创建Redux store： ``` import { createStore } from 'redux'; import rootReducer from './reducers'; const store = createStore(rootReducer); ``` 在组件中使用Redux： ``` import { connect } from 'react-redux'; function MyComponent({ count, dispatch }) { const handleClick = () => { dispatch({ type: 'INCREMENT' }); }; return ( <div> <p>Count: {count}</p> <button onClick={handleClick}>Increment</button> </div> ); } export default connect(state => ({ count: state.count }))(MyComponent); ``` 4. 使用React Hooks React Hooks是React 16.8版本推出的新特性，可以让函数组件具有类组件的功能，例如状态管理、生命周期等。 使用React Hooks： 例如，在函数组件中使用useState Hook： ``` import { useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <p>Count: {count}</p> <button onClick={handleClick}>Increment</button> </div> ); } ``` 以上就是UMI React项目技术介绍的具体写法。