uniapp封装网络请求时header参数未传递导致Token失效的修复方案

项目场景

uniapp项目中从服务器获取数据

问题描述

在请求中携带token参数，运行是显示请求失败

主要涉及的核心代码如下：

async getInfo() {
	const res = await this.$myRequest({
		url: '/prod-api/api/common/user/getInfo',
		header: {
			'Authorization': uni.getStorageSync('token') // 在请求头中添加token参数
		},
	})
	console.log(res.data.user);
	this.personalInfo = res.data.user
},

运行效果如图所示：

以下是项目中封装的网络请求模块代码：

const BASE_URL = '这里填实际的地址'
export const myRequest = (options) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASE_URL + options.url,
            method: options.method || 'GET',
            data: options.data || {},
            success: (res) => {
                if (res.data.code !== 200) {
                    return uni.showToast({
                        title: "获取数据失败"
                    })
                }
                resolve(res)
            },
            fail: (err) => {
                uni.showToast({
                    title: "请求接口失败"
                })
                reject(err)
            }
        })
    })
}

从执行结果来看，请求触发了fail分支，表明网络请求未能成功完成。

原因分析

在代码实现中，请求头信息是通过options.header对象进行传递的。虽然封装了一个名为myRequest的方法来统一发送请求，但在调用该封装方法时，并未将header参数正确透传至底层的实际请求逻辑中。由于封装函数内部缺少对header参数的处理逻辑，导致最终发出的HTTP请求中不包含该参数。

因此，服务器端无法接收到客户端传递的Authorization认证参数，进而判定请求非法或身份未验证，导致请求失败。

解决方案

针对上述问题，需要对封装的myRequest函数进行代码调整。具体操作是在调用uni.request发起网络请求时，显式地将options.header作为配置项的一部分传递进去，从而确保请求中携带正确的请求头信息。

修改后的代码示例如下：

const BASE_URL = '这里填实际的地址'
export const myRequest = (options) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASE_URL + options.url,
            method: options.method || 'GET',
            data: options.data || {},
            header: options.header || {}, // 将header参数传递给request方法
            success: (res) => {
                if (res.data.code !== 200) {
                    return uni.showToast({
                        title: "获取数据失败"
                    })
                }
                resolve(res)
            },
            fail: (err) => {
                uni.showToast({
                    title: "请求接口失败"
                })
                reject(err)
            }
        })
    })
}

经过上述调整后，接口请求即可正常执行。

总结

为解决uniapp项目中因Token传递失败导致的请求错误，我们对封装的网络请求方法进行了重构。经分析发现，原封装方法未将header参数正确传递给底层请求接口，导致服务器无法解析Authorization信息。

因此，我们优化了myRequest方法的实现，确保将options.header作为参数完整传递给uni.request方法，从而保证请求头信息能够准确送达。通过这一修改，Authorization参数被成功注入请求头，服务器得以正确识别用户身份并处理业务请求。

在处理涉及Token参数的网络请求时，需掌握以下关键知识点：

1. 请求头（Header）：作为HTTP协议的重要组成部分，用于向服务器传递附加元数据。在本场景中，需将Token以Authorization参数的形式嵌入请求头中。

2. 封装网络请求方法：通过封装myRequest方法，实现代码的复用与管理，统一处理请求发送及响应逻辑。

3. 参数传递：在封装的myRequest方法中，必须确保header参数被正确传递给底层请求接口，具体做法是将options.header作为参数传入uni.request方法中。

4. 异步操作：鉴于网络请求属于异步操作，代码中采用async/await语法等待请求完成后再获取数据，避免在数据返回前执行后续逻辑。

此外，还需注意以下事项：

1. Token的获取：通常利用uni.setStorageSync()方法将Token值存储至本地缓存，随后通过uni.getStorageSync()方法读取Token，并将其附加至请求头中。

2. 跨域问题：若请求服务器与当前页面域名不一致，可能引发跨域限制。可通过uni.request方法的withCredentials参数配合服务器端设置Access-Control-Allow-Origin头部，或使用uni.request的proxy参数进行接口代理来解决。

3. 接口安全：发送请求时，需确保接口地址准确无误，且仅向可信服务器发起请求。同时，应避免在代码中直接暴露密码等敏感信息。

为确保请求头中包含必要的Token参数，可在封装网络请求方法时将Token作为参数传入，并在myRequest方法中将其合并至header中。此举不仅使代码更具灵活性，便于在不同场景下使用不同的Token值，同时也提升了代码的安全性。

另外需注意，在请求头中携带Token参数时，服务器端需进行相应的验证机制，以确认用户身份的合法性。例如，服务器可对Token进行解密和校验，确保其由合法用户生成，从而有效防范恶意攻击和非法访问。

综上所述，解决该问题的核心在于封装的网络请求方法中需正确传递header参数，确保请求头中包含所需的Token参数，从而顺利从服务器获取数据。同时，需综合考虑Token获取、跨域处理及接口安全等因素，以提升请求的安全性和稳定性。

以上就是uniapp解决token值无法使用的问题的详细内容，更多关于uniapp解决token值无法使用的资料请关注本站其它相关文章！