在请求通过API路由发送之前,有没有可能运行一个中间件(或任何其他结构)来为请求设置一些自定义头?我现在用的是Next。js 12.2,并且必须在项目中已经存在的许多请求中包含一些授权头,但是我正在寻找一些方法来创建一个帮助器,可以管理添加头,而不必直接将其添加到所有API路由中。任何帮助是赞赏!
iibxawm41#
我通过实现一个自定义的Fatcher类和一个钩子useRequest来实现Fatcher功能来处理这种情况。这使得所有API请求功能更容易,并且更新任何部分也非常容易。下面是我的代码,希望对大家有帮助:Fatcher。ts
Fatcher
useRequest
type Token = string | null | undefined; type BaseHeader = Object | undefined; type Url = string; class Fetcher { token: Token = undefined; logger: any = console; log: boolean = true; baseHeader: BaseHeader = { Accept: "application/json", "Content-Type": "application/json", } constructor(_token: Token = undefined, _log: any = true, _baseHeader: BaseHeader = undefined) { if (_token) this.token = _token; if (_baseHeader) this.baseHeader = _baseHeader; this.log = _log; } getHeader() { return { ...this.baseHeader, Authorization: this.token && `token ${this.token}`, } } get(_url: Url) { return this.fetch_data(_url, { method: "GET", headers: this.getHeader() }) } post(_url: Url, _body: Object) { return this.fetch_data(_url, { method: "POST", headers: this.getHeader(), body: JSON.stringify(_body), }) } put(_url: Url, _body: Object) { return this.fetch_data(_url, { method: "PUT", headers: this.getHeader(), body: JSON.stringify(_body), }) } patch(_url: Url, _body: Object) { return this.fetch_data(_url, { method: "PATCH", headers: this.getHeader(), body: JSON.stringify(_body), }) } delete(_url: Url, _body: Object | undefined = undefined) { return this.fetch_data(_url, { method: "DELETE", headers: this.getHeader(), body: _body && JSON.stringify(_body), }) } } export default Fetcher;
这个钩子使用Fatcher类,如果authenticated为true,则获取存储在redux中的令牌。在您的情况下,您可以从存储令牌的位置获取令牌,例如本地存储。
import {useSelector} from "react-redux"; import {RootState} from "../../redux/reducers"; import getLogger from "../logger/getLogger"; import Fetcher from "./fetcher"; const useRequest = (authenticated = false, _log = true, _token: any = undefined) => { if (authenticated && !_token) _token = useSelector((state: RootState) => state.auth.token); const logger = getLogger(); if (logger.showLog('info') && _log) _log = true; return new Fetcher(_token, _log); }; export default useRequest;
不需要提供任何标题附加标题信息。用法如下所示:
const request = useRequest(true); request.get(REST_API_ENDPOINTS.auth.v1.userInfo()).then((response) => { dispatch(userInfoUpdateAction(response));
它可以以更简化的方式实现,但一旦设置好,就不需要再进行配置了。我更喜欢更详细的实现。希望对你有帮助,
1条答案
按热度按时间iibxawm41#
我通过实现一个自定义的
Fatcher
类和一个钩子useRequest
来实现Fatcher
功能来处理这种情况。这使得所有API请求功能更容易,并且更新任何部分也非常容易。下面是我的代码,希望对大家有帮助:Fatcher。ts
使用请求。ts
这个钩子使用
Fatcher
类,如果authenticated为true,则获取存储在redux中的令牌。在您的情况下,您可以从存储令牌的位置获取令牌,例如本地存储。不需要提供任何标题附加标题信息。用法如下所示:
它可以以更简化的方式实现,但一旦设置好,就不需要再进行配置了。我更喜欢更详细的实现。希望对你有帮助,