i18next + React TypeScript：如何在API调用中携带认证令牌？

先提个小问题：你代码里重复引入了HttpApi和XHR（两者是同一个包的不同导出方式），可以删掉其中一个，比如保留import HttpApi from 'i18next-http-backend';，然后把i18n.use(XHR)改成i18n.use(HttpApi)就行。

下面是两种添加认证令牌的具体方案：

方法一：用customHeaders直接加请求头 #

如果你的令牌是固定值或者能直接获取，直接在backend配置里加customHeaders字段，设置Authorization请求头即可：

backend: {
    // 建议把写死的en改成{{lng}}，自动适配当前语言加载对应翻译文件
    loadPath: `${process.env.REACT_APP_BASE}locale/guest/{{lng}}`,
    parse: function (data) {
        // 修正原代码错误：参数是data不是res
        const parsedData = JSON.parse(data);
        console.log(parsedData.data);
        return parsedData.data;
    },
    // 添加认证令牌请求头
    customHeaders: {
        'Authorization': `Bearer ${你的认证令牌}`
    }
},

方法二：自定义request函数控制请求逻辑 #

如果需要动态获取令牌（比如从localStorage读取），或者有更复杂的请求配置，可以自定义request函数，完全掌控请求发送过程：

backend: {
    loadPath: `${process.env.REACT_APP_BASE}locale/guest/{{lng}}`,
    parse: function (data) {
        const parsedData = JSON.parse(data);
        console.log(parsedData.data);
        return parsedData.data;
    },
    // 自定义请求函数
    request: function (options, url, payload, callback) {
        // 动态获取令牌，示例从localStorage读取
        const token = localStorage.getItem('authToken');
        fetch(url, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.text())
        .then(data => callback(null, data))
        .catch(err => callback(err, null));
    }
},

内容的提问来源于stack exchange，提问作者Sonal