uni-app 无痛刷新 token 方法

用户飞天 發表於 2019-10-31 16:03:00

为了给用户一个流畅的体验, 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 文件
 
<img src="https://img2018.cnblogs.com/blog/1623487/201910/1623487-20191031155609814-113830902.png">
 
 <img src="https://img2018.cnblogs.com/blog/1623487/201910/1623487-20191031160033765-657856026.png">
 再修改 vmeitime-http 文件夹下的  interface.js 文件,将401状态暴漏出来
 <img src="https://img2018.cnblogs.com/blog/1623487/201910/1623487-20191031160301782-1530549040.png">
如果看到这里还是看不明白,那么请看我的源码,请注意我使用了两个插件,观众们酌情理解,仔细消化,配合到自己的项目中思考...
源码点下面的折叠小加号 ⬇ (老有人问我要源码,源码在下面)
 
<div class="cnblogs_code"><img id="code_img_closed_56aa5772-43d5-4d42-8adb-ef7e18f36433" class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_56aa5772-43d5-4d42-8adb-ef7e18f36433" class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_56aa5772-43d5-4d42-8adb-ef7e18f36433" class="cnblogs_code_hide">
<pre>import http from './interface'
import config from './config'

// request.js
import Vue from 'vue'
import Routerfrom '@/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: '您的账号在其它地点登录!',
 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')
 }
 }
 // 统一处理错误请求
 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.path,
 method: config.interface.method ? config.interface.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: '登陆过期请重新登陆！',
 icon: "none",
 success() {
 Router.push({
 name: 'login',
 params: {
 'RouterName': 'home'
 }
 })
 }
 });
 }
}</pre>
</div>
View Code</div>
 

</div>
<div id="MySignature" role="contentinfo">
如果我的文章对您有帮助,欢迎您点击推荐以及评论 QAQ 
来源：https://www.cnblogs.com/jun-qi/p/11771771.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 无痛刷新 token 方法