項(xiàng)目場(chǎng)景：

uniapp項(xiàng)目中從服務(wù)器獲取數(shù)據(jù)

問題描述

在請(qǐng)求中攜帶token參數(shù)，運(yùn)行是顯示請(qǐng)求失敗

這是主要代碼：

async getInfo() {
	const res = await this.$myRequest({
		url: '/prod-api/api/common/user/getInfo',
		header: {
			'Authorization': uni.getStorageSync('token') // 在請(qǐng)求頭中添加token參數(shù)
		},
	})
	console.log(res.data.user);
	this.personalInfo = res.data.user
},

如圖：

這是封裝的網(wǎng)絡(luò)請(qǐng)求：

const BASE_URL = '這里填實(shí)際的地址'
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: "獲取數(shù)據(jù)失敗"
                    })
                }
                resolve(res)
            },
            fail: (err) => {
                uni.showToast({
                    title: "請(qǐng)求接口失敗"
                })
                reject(err)
            }
        })
    })
}

根據(jù)圖片可以看出執(zhí)行了fail這塊代碼

原因分析：

在代碼中，請(qǐng)求頭是通過options.header傳遞的，這里封裝了一個(gè)myRequest方法來發(fā)送請(qǐng)求，但是在調(diào)用該方法時(shí)，并沒有正確地將header參數(shù)傳遞到實(shí)際的請(qǐng)求中。因?yàn)榉庋b的方法里面沒有header參數(shù)，所以實(shí)際請(qǐng)求也不會(huì)傳遞這個(gè)參數(shù)。

因此，服務(wù)器并不會(huì)收到傳遞的Authorization參數(shù)，導(dǎo)致請(qǐng)求失敗。

解決方案：

為了解決這個(gè)問題，需要對(duì)封裝的myRequest方法進(jìn)行修改。具體做法是，在調(diào)用uni.request時(shí)，將options.header作為一個(gè)參數(shù)傳遞進(jìn)去，以便在請(qǐng)求中包含正確的請(qǐng)求頭信息。

下面是修改后的代碼示例：

const BASE_URL = '這里填實(shí)際的地址'
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參數(shù)傳遞給request方法
            success: (res) => {
                if (res.data.code !== 200) {
                    return uni.showToast({
                        title: "獲取數(shù)據(jù)失敗"
                    })
                }
                resolve(res)
            },
            fail: (err) => {
                uni.showToast({
                    title: "請(qǐng)求接口失敗"
                })
                reject(err)
            }
        })
    })
}

這樣就可以成功運(yùn)行了

總結(jié)

為了解決uniapp項(xiàng)目中請(qǐng)求失敗的問題，我們對(duì)封裝的網(wǎng)絡(luò)請(qǐng)求方法進(jìn)行了修改。在分析后發(fā)現(xiàn)，原封裝方法未正確傳遞header參數(shù)到實(shí)際請(qǐng)求中，導(dǎo)致服務(wù)器無法獲取Authorization參數(shù)，進(jìn)而導(dǎo)致請(qǐng)求失敗。

所以我們優(yōu)化了myRequest方法的代碼，將options.header作為參數(shù)傳遞給uni.request方法，確保請(qǐng)求頭信息正確傳遞。通過這樣的修改，成功將Authorization參數(shù)傳遞到請(qǐng)求頭中，服務(wù)器能夠正確識(shí)別用戶身份，并成功處理請(qǐng)求。

在處理涉及token參數(shù)的請(qǐng)求時(shí)，需要注意以下關(guān)鍵知識(shí)點(diǎn)：

1. 請(qǐng)求頭（Header）：請(qǐng)求頭是HTTP協(xié)議的一部分，用于向服務(wù)器傳遞附加信息。在本場(chǎng)景中，我們需要將token作為Authorization參數(shù)添加到請(qǐng)求頭中。

2. 封裝網(wǎng)絡(luò)請(qǐng)求方法：為了方便復(fù)用和管理代碼，我們封裝了myRequest方法來發(fā)送請(qǐng)求和處理響應(yīng)。

3. 參數(shù)傳遞：在封裝的myRequest方法中，我們確保正確地將header參數(shù)傳遞給實(shí)際的請(qǐng)求，通過將options.header作為參數(shù)傳遞給uni.request方法來實(shí)現(xiàn)。

4. 異步操作：由于網(wǎng)絡(luò)請(qǐng)求是異步操作，我們使用了async/await語法來等待請(qǐng)求完成后再獲取數(shù)據(jù)，避免在數(shù)據(jù)未返回時(shí)進(jìn)行后續(xù)操作。

此外，還需要注意以下幾點(diǎn)：

1. token的獲?。和ǔＪ褂胾ni.setStorageSync()方法將token值存儲(chǔ)在本地緩存中，然后使用uni.getStorageSync()方法獲取token值，并將其添加到請(qǐng)求頭中。

2. 跨域問題：如果請(qǐng)求的服務(wù)器與當(dāng)前頁面所在的域名不同，會(huì)出現(xiàn)跨域問題。為了解決這個(gè)問題，可以使用uni.request方法的withCredentials參數(shù)，并在服務(wù)器端設(shè)置Access-Control-Allow-Origin頭部字段，或使用uni.request方法的proxy參數(shù)進(jìn)行接口代理。

3. 接口安全：在發(fā)送請(qǐng)求時(shí)，確保接口地址正確，并只向可信的服務(wù)器發(fā)送請(qǐng)求。同時(shí)，避免在代碼中直接暴露敏感信息，如密碼等。

為確保請(qǐng)求頭中包含所需的token參數(shù)，我們可以在封裝網(wǎng)絡(luò)請(qǐng)求方法時(shí)將token作為參數(shù)傳遞進(jìn)來，并在myRequest方法中將其添加到header中。這樣做的好處是代碼更靈活，方便在不同場(chǎng)景下使用不同的token值，同時(shí)提高代碼的安全性。

另外，需要注意的是，在請(qǐng)求頭中攜帶token參數(shù)時(shí)，服務(wù)器端需要進(jìn)行相應(yīng)的驗(yàn)證，以確保用戶身份的合法性。例如，可以在服務(wù)器端對(duì)token進(jìn)行解密和驗(yàn)證，以確保token是由合法用戶生成的，從而有效防止惡意攻擊和非法訪問。

綜上所述，解決這個(gè)問題的關(guān)鍵是在封裝的網(wǎng)絡(luò)請(qǐng)求方法中正確傳遞header參數(shù)，以確保請(qǐng)求頭中包含所需的token參數(shù)，從而能夠順利從服務(wù)器獲取數(shù)據(jù)。同時(shí)，注意token的獲取、跨域問題和接口安全等方面的考慮，以提高請(qǐng)求的安全性和穩(wěn)定性。

以上就是uniapp解決token值無法使用的問題的詳細(xì)內(nèi)容，更多關(guān)于uniapp解決token值無法使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論