項目場景：

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

問題描述

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

這是主要代碼：

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

如圖：

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

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: "獲取數(shù)據(jù)失敗"
                    })
                }
                resolve(res)
            },
            fail: (err) => {
                uni.showToast({
                    title: "請求接口失敗"
                })
                reject(err)
            }
        })
    })
}

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

原因分析：

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

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

解決方案：

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

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

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參數(shù)傳遞給request方法
            success: (res) => {
                if (res.data.code !== 200) {
                    return uni.showToast({
                        title: "獲取數(shù)據(jù)失敗"
                    })
                }
                resolve(res)
            },
            fail: (err) => {
                uni.showToast({
                    title: "請求接口失敗"
                })
                reject(err)
            }
        })
    })
}

這樣就可以成功運行了

總結(jié)

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

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

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

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

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

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

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

此外，還需要注意以下幾點：

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

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

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

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

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

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

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

最新評論