uniapp双Token简单的无痛刷新

工具

jsonwebtoken

1. - 安装方式

     npm install jsonwebtoken
  
2. - 引入方式（在需要的地方引用）

    import jwt from "jsonwebtoken"
  
3. - 使用方式

    let user = jwt.decode(token)

正片开始

我选用的是uniapp自带的拦截器，uni.addInterceptor（），因为使用官方的比较方便，而且其他的我也不会。

顺便做一下get和post请求的封装

1. 新建一个HTTP的目录
2. 再建一个index.js的文件

import jwt from "jsonwebtoken"

    uni.addInterceptor('request', {
        invoke(args) { //这里是请求前拦截
            let token = uni.getStorageSync('token'), //uni.getStorageSync 这个是uniapp自带获取缓存API，缓存的是普通token
                X_Token = uni.getStorageSync('X-Token'), //这个是刷新用的token
                timestamp = (+new Date().getTime() / 1000) //获取当前的时间戳
            if (token == "" && X_Token == '') { //因为第一次请求前拦截的的时候是没有token的，所以直接跳过

            } else {
                let user = jwt.decode(token), //这里是对token的解码
                    expToken = user.exp //普通token的过期时间
                if (timestamp >= expToken) { //当前时间是否过期，过期就需要带刷新token一起请求
                    args.header = {
                        "Authorization": "Bearer " + token,
                        "X-Authorization": 'Bearer ' + X_Token,
                    }
                } else {
                    args.header = {
                        "Authorization": 'Bearer ' + token,
                    }
                }
            }
        },

        success(args) { //这里是拦截成功后做缓存和更新token
            if ((args.header["access-token"] !== "invalid_token") && (args.header["access-token"] !==undefined)) {//主要是判断有没有携带token返回，
                uni.setStorage({// uni.setStorage这个是uniapp缓存API
                    key: 'token',
                    data: args.header["access-token"],
                    success: function (res) {}
                });
                uni.setStorage({
                    key: 'X-Token',
                    data: args.header['x-access-token'],
                    success: function (res) {}
                });
            }
        }
    })

    export function get(url, data = null) {
        return new Promise((resolve, reject) => {
            uni.request({
                url: url,
                data: data,
                method: "GET",
                success(res) {
                    reject(res)
                },
                fail(res) {
                    reject(res)
                }
            })
        })
    }
    export function post(url, data = null) {
        return new Promise((resolve, reject) => {
            uni.request({
                url: url,
                data: data,
                method: "POST",
                success(res) {
                    reject(res)
                },
                fail(res) {
                    reject(res)
                }
            })
        })
    }

封装的get和psot请求，需要在main.js导入和注册

import {
	get
} from "HTTP/index.js"
import {
	post
} from "HTTP/index.js"
Vue.prototype.$get = get;
Vue.prototype.$post = post;

使用方式

this.$get(（url）, {
	xxx: xxxxx,
	}).then(res => {
	console.log(res)
	})
}
this.$post(（url）, {
	xxxx: xxxx,
	}).then(res => {
	console.log(res)
	})
}

新人，代码一般，有用请点个赞，谢谢！