uni-app 无痛刷新 token 方法

发布时间:2021-04-29 发布网站:https://www.cnblogs.com/jun-qi
前端之家收集整理的这篇文章主要介绍了uni-app 无痛刷新 token 方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

为了给用户一个流畅的体验,token 过期后需要重新请求新的 token 替换过期的 token 

前端在请求接口时,和后端定义好了,如果状态码为 401,则表明 token 过期,需要前端请求新的 token

 流程思路参考: https://www.jianshu.com/p/58f05bf13b7d

大概流程如下:

1.用户登录之后,后端会返回两个 token,分别为 accessToken 和 refreshToken 存储到 Storage

平时请求数据时,请求头使用 accessToken 来发送接口

2.当返回401 token 过期后,我们通过接口向后端获取新的 token,请求参数为 refreshToken

3.我们拿到新的 accessToken 和 refreshToken 之后,替换掉之前的 Storage 中存储的 token

4.同时还要将我们报 401 的哪个接口,使用新的 accessToken,重新请求一次,拿到数据,实现无痛刷新 token

5.如果后端返回的新的 token 也无法使用,表明需要重新登录,跳到登录页(这一步可以灵活使用,我个人用的是一个路由插件配合使用的: https://ext.dcloud.net.cn/plugin?id=578)

 

配合uni-app的插件进行使用和实现:

到uni-app的插件市场下载 封装的request网络请求 ,按照文档配置到自己的项目上

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

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

 

uni-app  无痛刷新 token 方法

 

 

uni-app  无痛刷新 token 方法

 再修改 vmeitime-http 文件夹下的  interface.js 文件,将401状态暴漏出来

 

uni-app  无痛刷新 token 方法

如果看到这里还是看不明白,那么请看我的源码,请注意我使用了两个插件,观众们酌情理解,仔细消化,配合到自己的项目中思考...

源码点下面的折叠小加号 ⬇ (老有人问我要源码,源码在下面)

 

uni-app  无痛刷新 token 方法

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

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

...其它逻辑代码

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

    设置请求前拦截器
    http.interceptor.request = (config) => {
        let token = uni.getStorageSync('accessToken')
        delete config.header['x-access-token']
        if (token) {
            config.header['x-access-token'] = token
        }
    }
    设置请求结束后拦截器
    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: '您的账号在其它地点登录!'falsefunction(res) {
                             (res.confirm) {
                                Router.push({
                                    name: 'login'
                                    }
                                })
                            }
                        },})
                });
                uni.setStorageSync('jump','true')
            }
        }
        if (statusCode == 403) {
            let jump = uni.getStorageSync('jump' {
                    Router.replace({
                        name: 'login'
                        }
                    })
                },500)
                uni.setStorageSync('jump',1)"> 统一处理错误请求
        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"
            });
        }
        return response;
    }
     http.request({
        name: name,baseUrl: config.base,url: config.interface[name].path,method: config.interface[name].method ? config.interface[name].method : 'GET'default {
    execute
}
     刷新 token 方法
    async  doRequest(response) {
        const res = await execute('refresh',{refreshToken: uni.getStorageSync('refreshToken')})
        const {
            code,data
        } = res.data
        if (code == 0) {
            uni.setStorageSync('accessToken'= response.config
            config.header['x-access-token'] = data.accessToken
            const resold = await execute(config.name,{ ...config.data
            })
             resold
        } else {
            uni.removeStorageSync('accessToken');
            uni.showToast({
                title: '登陆过期请重新登陆!'
                        }
                    })
                }
            });
        }
    }
View Code

 

总结


以上是前端之家为你收集整理的uni-app 无痛刷新 token 方法全部内容,希望文章能够帮你解决uni-app 无痛刷新 token 方法所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。