uniapp无痛刷新token
程序员文章站
2022-08-03 15:27:53
用户登录拿到token,但由于token是有时限的,刷新token的时候需要无声无息,用户还能继续之前的请求。 这里我的想法是,当token到期,返回状态码401,就发起刷新token接口,拿到新的token就把之前的请求再发送一遍,暂时解决问题 此法适用uniapp噢,之前看到其他人的教程,然后按 ......
用户登录拿到token,但由于token是有时限的,刷新token的时候需要无声无息,用户还能继续之前的请求。
这里我的想法是,当token到期,返回状态码401,就发起刷新token接口,拿到新的token就把之前的请求再发送一遍,暂时解决问题
此法适用uniapp噢,之前看到其他人的教程,然后按照他的做法,自己亲测之后并记录
- 首先,引入封装的request插件:
- 按照插件配置服务器网址。
- 在index.js中设置请求拦截程序
import http from './interface' import store from "@/store/index.js" /** * 将业务所有接口统一起来便于维护 * 如果项目很大可以将 url 独立成文件,接口分成不同的模块 */ module.exports={ api: { userdetail:'/user', //用户详情 //... }, request:(url,data,method) => { http.config.baseurl = "" //设置请求前拦截器 http.interceptor.request = (config) => { let token =uni.getstoragesync("token") delete config.header['authorization'] if(token){ config.header['authorization']='bearer ' +token } } //设置请求结束后拦截器 http.interceptor.response =async (response) => { const statuscode=response.statuscode if(statuscode ===401){ //返回401,即token需刷新 return response.data=await dorequest(response,url) } if (statuscode === 422){ uni.hideloading() //业务代码...return }
//不能再刷新时,服务器返回状态码500时 if(response.statuscode ===500 ){ store.commit("login",undefined) uni.removestoragesync("token") uni.removestorage({ key:"password" }) uni.showtoast({ icon:"none", title:"身份信息过期,请重新登陆", duration: 1000, complete() { uni.relaunch({ url:'/pages/login/login' }) } }) return } if(response.statuscode===200 || response.statuscode===201|| response.statuscode===204){ //成功 uni.hideloading() return response.data }else { uni.hideloading() uni.showtoast({ title:response.data.message , icon:'none', duration: 1000 }) return } } return http.request({ url:url, data, method:method }) }, }
//刷新token并继续之前请求 async function dorequest(response,url){ const res=await module.exports.request('/authorizations/current',{},'put') if(res && res.access_token){ let config=response.config uni.setstoragesync("token", res.access_token); config.header['authorization']='bearer '+res.access_token const resold=await module.exports.request(url,{...config.data},config.method) uni.hideloading() return resold }
// else{ // console.log("重新登陆"); // uni.removestoragesync("token") // store.commit("login",undefined) // uni.removestoragesync("password") // uni.showtoast({ // title:"身份信息过期,请重新登陆", // duration: 1000, // success() { // uni.relaunch({ // url:'/pages/login/login' // }) // } // }) // return false // } }
// 统一的响应日志记录 interface.js中,将401开放出来,500不开放 _reslog(response) if (statuscode === 200 || statuscode === 401 || statuscode === 201 || statuscode === 204) { //成功 resolve(response); } else { reject(response) }
推荐阅读
-
ASP.NET Core 2.2 : 二十六. 应用JWT进行用户认证及Token的刷新
-
axios如何利用promise无痛刷新token的实现方法
-
vue下axios拦截器token刷新机制
-
解决vue打包后刷新页面报错:Unexpected token <
-
详解ASP.NET Core Web Api之JWT刷新Token
-
uniapp无痛刷新token
-
uniapp 电商小程序 微信支付功能及当前页面刷新
-
Getway jwt 单点登录以及刷新token时间
-
OkHttp实现全局过期token自动刷新
-
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例