詳解uniapp無(wú)痛刷新token方法

更新時(shí)間：2021年06月04日 14:42:24 作者：jser_Amos

為了給用戶一個(gè)流暢的體驗(yàn),token過(guò)期后需要重新請(qǐng)求新的token替換過(guò)期的token。本文將詳細(xì)介紹uniapp無(wú)痛刷新token方法。

前端在請(qǐng)求接口時(shí),和后端定義好了,如果狀態(tài)碼為 401 ,則表明 token 過(guò)期,需要前端請(qǐng)求新的 token

大概流程如下:

1.用戶登錄之后,后端會(huì)返回兩個(gè) token ,分別為accessToken 和refreshToken 存儲(chǔ)到Storage

平時(shí)請(qǐng)求數(shù)據(jù)時(shí),請(qǐng)求頭使用accessToken 來(lái)發(fā)送接口

2.當(dāng)返回401 token 過(guò)期后, 我們通過(guò)接口向后端獲取新的 token ,請(qǐng)求參數(shù)為refreshToken

3.我們拿到新的accessToken 和refreshToken 之后, 替換掉之前的Storage 中存儲(chǔ)的 token

4.同時(shí)還要將我們報(bào) 401 的哪個(gè)接口 ,使用新的accessToken ,重新請(qǐng)求一次, 拿到數(shù)據(jù),實(shí)現(xiàn)無(wú)痛刷新 token

5.如果后端返回的新的 token 也無(wú)法使用,表明需要重新登錄,跳到登錄頁(yè)(這一步可以靈活使用,我個(gè)人用的是一個(gè)路由插件配合使用的: https://ext.dcloud.net.cn/plugin?id=578)

配合uni-app的插件進(jìn)行使用和實(shí)現(xiàn):

到uni-app的插件市場(chǎng)下載封裝的request網(wǎng)絡(luò)請(qǐng)求,按照文檔配置到自己的項(xiàng)目上

地址:https://ext.dcloud.net.cn/plugin?id=159

配置好后修改vmeitime-http 文件夾下的 index.js 文件

再修改vmeitime-http 文件夾下的 interface.js 文件,將401狀態(tài)暴漏出來(lái)

如果看到這里還是看不明白,那么請(qǐng)看我的源碼,請(qǐng)注意我使用了兩個(gè)插件,觀眾們酌情理解,仔細(xì)消化,配合到自己的項(xiàng)目中思考...

import http from './interface'
import config from './config'

// request.js
import Vue from 'vue'
import Router  from '@/router'

//...其它邏輯代碼

export const execute = (name, data = {}) => {

    //設(shè)置請(qǐng)求前攔截器
    http.interceptor.request = (config) => {
        let token = uni.getStorageSync('accessToken')
        delete config.header['x-access-token']
        if (token) {
            config.header['x-access-token'] = token
        }
    }
    //設(shè)置請(qǐng)求結(jié)束后攔截器
    http.interceptor.response = async (response) => {
        const statusCode = response.statusCode;
        if (statusCode === 401) {
            response = await doRequest(response)
        }
        if (statusCode === 402) {
            uni.removeStorageSync('accessToken');
            uni.removeStorageSync('refreshToken');
            uni.removeStorageSync('realname');
            let jump = uni.getStorageSync('jump')
            if (!jump) {
                setTimeout(() => {
                    uni.showModal({
                        title: '提示',
                        content: '您的賬號(hào)在其它地點(diǎn)登錄!',
                        showCancel: false,
                        success: function(res) {
                            if (res.confirm) {
                                Router.push({
                                    name: 'login',
                                    params: {
                                        'RouterName': 'home'
                                    }
                                })
                            }
                        },
                    })
                });
                uni.setStorageSync('jump', 'true')
            }
        }
        if (statusCode == 403) {
            let jump = uni.getStorageSync('jump')
            if (!jump) {
                setTimeout(() => {
                    Router.replace({
                        name: 'login',
                        params: {
                            'RouterName': 'home'
                        }
                    })
                },500)
                uni.setStorageSync('jump', 'true')
            }
        }
        // 統(tǒng)一處理錯(cuò)誤請(qǐng)求
        const code = response.data.code;
        const message = response.data.message;
        if (response.statusCode == 200 && code !== 0 && code != -1 && code) {
            uni.showToast({
                title: message,
                icon: "none",
                duration: 2000
            });
        }
        return response;
    }
    return http.request({
        name: name,
        baseUrl: config.base,
        url: config.interface[name].path,
        method: config.interface[name].method ? config.interface[name].method : 'GET',
        dataType: 'json',
        data,
    })
}

export default {
    execute
}
    // 刷新 token 方法
    async function doRequest(response) {
        const res = await execute('refresh', {refreshToken: uni.getStorageSync('refreshToken')})
        const {
            code,
            data
        } = res.data
        if (code == 0) {
            uni.setStorageSync('accessToken', data.accessToken)
            uni.setStorageSync('refreshToken', data.refreshToken)
            let config = response.config
            config.header['x-access-token'] = data.accessToken
            const resold = await execute(config.name,{ ...config.data
            })
            return resold
        } else {
            uni.removeStorageSync('accessToken');
            uni.removeStorageSync('refreshToken');
            uni.showToast({
                title: '登陸過(guò)期請(qǐng)重新登陸！',
                icon: "none",
                success() {
                    Router.push({
                        name: 'login',
                        params: {
                            'RouterName': 'home'
                        }
                    })
                }
            });
        }
    }

以上就是詳解uniapp無(wú)痛刷新token方法的詳細(xì)內(nèi)容，更多關(guān)于uni-app無(wú)痛刷新token方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: