合肥手机网站制作建设,服务器安全狗,最新的购物网站 开,可以做动漫的网站有哪些前言#xff1a; 1、为什么不适用uniapp自带的请求功能#xff1f; 答#xff1a;uniapp自带的请求功能#xff0c;再刷新了令牌后#xff0c;重新请求返回的数据无法返回给发起请求的方法。也就是说#xff0c;刷新令牌后重新发起的请求和第一次发起请求的方法是割裂的。…前言 1、为什么不适用uniapp自带的请求功能 答uniapp自带的请求功能再刷新了令牌后重新请求返回的数据无法返回给发起请求的方法。也就是说刷新令牌后重新发起的请求和第一次发起请求的方法是割裂的。 2、封装文件中我设置了无感刷新令牌功能。我后台的判断逻辑是当前端请求的令牌过期时间和当前时间比小于10分钟时刷新令牌。
一、安装axios 1.1、使用HBuilder打开uniapp项目点击视图-显示终端打开npm操作页面。 1.2、如果项目中还没有“package.json”文件请先初始化项目。
npm init -y1.3、安装axios建议锁定低版本使用uniapp-vue3版本时axios的版本需要0.26.0以下。
npm i axios0.26.01.4 在main.js中配置axios
import axios from axios//引入axios
import * as request from /common/api/request.js//自定义请求封装文件
Vue.prototype.$http request //封装的请求方法// 解决uniapp 适配axios请求避免报adapter is not a function错误
// 此配置也可以放在自定义请求封装文件中例如 request.js
axios.defaults.adapter config {return new Promise((resolve, reject) {let settle require(axios/lib/core/settle);let buildURL require(axios/lib/helpers/buildURL);uni.request({method: config.method.toUpperCase(),url: config.baseURL buildURL(config.url, config.params, config.paramsSerializer),header: config.headers,data: config.data,dataType: config.dataType,responseType: config.responseType,sslVerify: config.sslVerify,complete: function complete(response) {response {data: response.data,status: response.statusCode,errMsg: response.errMsg,header: response.header,config: config};settle(resolve, reject, response);}})})
}二、自定义请求封装文件 request.js我的文件路径是 /根目录/common/api/request.js。
import axios from axios // 引入axios
import store from /store/index.js//引入store仓库function getToken() { //获取令牌let token store.state.accountValue.accessToken //store仓库中的令牌if (!token) { //令牌不存在显示登录弹窗openLoginDialog()}return token
}//令牌过期刷新令牌请求
function refreshToken() {return service.get(/account/user/refresh/login).then(res res)
}//设置store及微信缓存中的账号信息
function setAccountInfo(accountInfo) {store.commit(accountValue/SET_ACCOUNT_INFO, accountInfo) //修改store中的账号信息//存储账号信息到微信缓存中wx.setStorage({key: userInfo,data: JSON.stringify(accountInfo)})
}axios.defaults.headers[Content-Type] application/json;charsetutf-8
// 创建axios实例
const baseUrl store.state.constantValue.hostUrl store.state.constantValue.port //域名/地址公共前缀
const appid store.state.constantValue.appid //小程序的appid
const requestTimeout store.state.constantValue.requestTimeout //默认的请求超时时间单位毫秒
const service axios.create({baseURL: baseUrl, //axios的默认请求地址前缀timeout: requestTimeout //默认的请求超时时间单位毫秒
})let requests [] // 重试队列数组把需要刷新令牌的请求都放入这个数组中每一项将是一个待执行的函数形式let common {//默认的请求配置信息data: {},header: {Content-Type: application/json,Content-Type: application/x-www-form-urlencoded},method: GET,dataType: json
}// 请求拦截器
service.interceptors.request.use(config {// 每次发送请求之前判断vuex中是否存在token// 如果存在则统一在http请求的headers都加上token这样后台根据token判断你的登录情况// 即使本地存在token也有可能token是过期的所以在响应拦截器中要对返回状态进行判断config.method config.method || common.method;if (config.method ! GET) {config.data config.data || common.data;}config.dataType config.dataType || common.dataType;config.header config.header || common.header;if (config.header.NeedToken NEED) { //如果需要访问令牌const token getToken();!isNull(token) (config.headers.Authorization Bearer token);}return config;},error {return Promise.error(error);});// 响应拦截器
service.interceptors.response.use(response {// 如果返回的状态码为200说明接口请求成功可以正常拿到数据// 否则的话抛出错误if (response.status 200) {let code response.data.code //code为自定义的后台响应codeif (code 20009 || code 20010) { //未登录或者登录异常需要重新登录时openLoginDialog()//打开登录弹窗return Promise.resolve(response.data); //返回响应结果} else {if (code 20017) { //后台要求刷新令牌const config response.configif (!store.state.constantValue.isRefreshing) { //如果正在刷新令牌状态为false//设置正在刷新令牌状态为true进入更新令牌阶段store.commit(constantValue/SET_IS_REFRESHING, true)//获取刷新令牌请求return refreshToken().then(res {if (res.code 20000) {// 刷新令牌成功设置store及微信缓存中的账号信息const accountInfo res.datasetAccountInfo(accountInfo)//已经刷新了令牌重新发起重试队列数组中的请求requests.forEach(cb cb(accountInfo.accessToken))// 完成后清空这个数组requests []//重置当前请求的配置重新发起请求config.headers.Authorization Bearer accountInfo.accessTokenconfig.baseURL baseUrl //axios的默认请求地址前缀config.timeout requestTimeout //默认的请求超时时间return service(config) //重新发起请求返回的就是当前请求} else {openLoginDialog()//打开登录弹窗}}).catch(rej { //令牌刷新发生错误openLoginDialog()//打开登录弹窗}).finally(() {//完成之后设置正在刷新令牌状态为falsestore.commit(constantValue/SET_IS_REFRESHING, false)})} else { //如果正在刷新令牌状态为trueif (config.header.NeedToken NEED) { //请求需要令牌// 返回一个未执行resolve的promisereturn new Promise((resolve) {// 将resolve放进重试队列数组用一个函数形式来保存等令牌刷新后直接执行requests.push((token) {config.headers.Authorization Bearer tokenresolve(service(config))})})}}}return Promise.resolve(response.data) //返回响应信息}} else { //状态码不为200时return Promise.reject(response.data) //返回响应异常信息}},error {return Promise.reject(error) //返回响应错误信息}
);export default service;
