刚接触小程序那会，一个接一个web的方法、APi不支持，难受的只能敲着代码，流着眼泪。
oauth2.0鉴权，一个access_token，一个refresh_token，一个expires_in。
在pc端我们可以使用cookie来轻松处理access_token过期，自动刷token。
然而我们在小程序中是不支持cookie的，我们只能通过缓存机制来保存token，这个时候是不能监听到token是否过期，只有通过接口调用的返回结果才知道token是否过期。
1.Token1.0
记得第一次为了赶时间，就急急忙忙写了个请求方法：
getAccessToken(callback) {
let that = this
console.log('→获取token')
var date = new Date();
var dt = date.getTime();
var dd = 0;
var expires_in = wx.getStorageSync('expires_in');
if (dt >= expires_in || isNaN(expires_in)) {
if (wx.getStorageSync('access_token') != 'wait') {
wx.setStorageSync('access_token', 'wait')
console.log('→token过期,刷新token')
var refresh_token = wx.getStorageSync('refresh_token');
wx.request({
url: API.refreshToken + refresh_token,
method: 'POST',
header: {
'Content-Type': 'application/json;charset=UTF-8',
"Authorization": "Basic bGl6LXJlZHBhY2thZ2Utd3g6c2VjcmV0" //base64加密liz-youli-wx:secret
},
success: function(res) {
util.waitHide();
if (res.data.error == 'invalid_grant' || res.data.error == 'invalid_token') {
console.log('→refresh_token失效')
var unionid = wx.getStorageSync('unionid', unionid); //unionid
// that.getToken(API.getToken + 'unionid_' + unionid + '_type_2');
//重新拿token
let url=API.getToken + 'unionid_' + unionid + '_type_2'
util.waitShow();
let that = this
console.log('→项目开始获取token开始/n', url);
wx.request({
url: url,
method: 'POST',
data: {},
header: {
'Content-Type': 'application/json;charset=UTF-8',
"Authorization": "Basic bGl6LWxpbWEtd3g6c2VjcmV0" //base64加密liz-youli-wx:secret
},
success(res) {
util.waitHide();
console.log(res, '→数据')
util.delayed30s(res.data.access_token, res.data.refresh_token, res.data.expires_in);
callback(res.data.access_token);
console.log('→项目开始获取token结束', url);
},
fail(e) {
console.log(e, '→获取token失败');
}
});
} else {
console.log('→刷新token成功')
util.delayed30s(res.data.access_token, res.data.refresh_token, res.data.expires_in);
callback(wx.getStorageSync('access_token'));
}
},
fail: function(e) {
util.waitHide();
}
})
} else {
setTimeout(() => {
callback(wx.getStorageSync('access_token'));
}, 2000)
}
} else {
console.log('→token未过期');
callback(wx.getStorageSync('access_token'));
}
},
fetchToken(url, method, data, callback, hideLoading) {
// util.waitShow();
wx.showNavigationBarLoading()
if (hideLoading == '1') {
console.log('hideLoading:' + hideLoading)
// util.waitHide();
wx.hideNavigationBarLoading()
}
let self = this
self.getAccessToken((res) => {
console.log(res, "→获取token成功")
wx.request({
url: url,
method: method,
data: data,
header: {
'Content-Type': 'application/json;charset=UTF-8',
"Authorization": "bearer " + res
},
success(res) {
// util.waitHide();
wx.hideNavigationBarLoading()
console.log('→返回数据', res.data);
if (res.data.error == 'invalid_token') {
console.log('invalid_token')
var unionid = wx.getStorageSync('unionid', unionid); //unionid
self.getToken(API.getToken + 'unionid_' + unionid + '_type_2');
callback(null, res.data);
} else {
callback(null, res.data);
}
console.log('→请求结束', url, data);
},
fail(e) {
console.log(e)
// util.waitHide();
wx.hideNavigationBarLoading()
util.showModal('加载失败', '网络不好，稍后再试试咯~')
callback(e);
}
});
})
}虽然这个已经满足基本开发要求。也摆脱了在token过期时，同时几个请求发出时token刷新几次的情况，但是还是感觉会有事故发生。
于是就想着封装一下token的存储、删除、刷新及获取。
2.Token2.0
通过promise来进行第一次封装，也在线上版本使用，效果看起来还不错，具体代码是这样的：
/**
* AuthProvider.js
*/
const wxRequest = require('./wxRequest')
const API = require('./api')
const Promise = require('./es6-promise');
function onLogin() {
let url = API.getToken + 'unionid_' + wx.getStorageSync('unionid') + '_type_2';
let token = API.SECRET;
return wxRequest.fetch(url, { type: 'Basic', value: token }, '', "POST").then((res) => {
saveTokens(res.data.access_token, res.data.refresh_token, res.data.expires_in);
return res.data.access_token
}).catch((req) => {
return 'error'
})
}
/*刷新时删除已有的access_token防止再次刷新*/
function setWait() {
wx.removeStorageSync('access_token');
}
function saveTokens(access_token, refresh_token, expires_in) {
wx.setStorageSync('access_token', access_token);
wx.setStorageSync('refresh_token', refresh_token);
var exp = new Date();
var expires_ins = exp.getTime() + expires_in * 1000 - 30000;
wx.setStorageSync('expires_in', expires_ins);
}
function onRefreshToken() {
setWait();
let token = API.SECRET;
var url = API.refreshToken + wx.getStorageSync('refresh_token');
return wxRequest.fetch(url, { type: 'Basic', value: token }, '', 'POST').then((res) => {
if (res.data.access_token) {
saveTokens(res.data.access_token, res.data.refresh_token, res.data.expires_in);
return res.data.access_token;
} else {
return onLogin().then(res => {
return res
});
}
}).catch(req => {
if (wx.getStorageSync('refresh_token') != null) {
return onLogin().then(res => {
return res
});
}
})
}
function getAccessToken() {
var date = new Date();
var dt = date.getTime();
var expires_in = wx.getStorageSync('expires_in');
if ((!expires_in || dt >= expires_in) && wx.getStorageSync('access_token')) {
return onRefreshToken();
} else if (!wx.getStorageSync('access_token')) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(wx.getStorageSync('access_token'))
}, 2000)
})
} else {
return new Promise((resolve, reject) => {
resolve(wx.getStorageSync('access_token'))
})
}
}
module.exports = {
onLogin: onLogin,
getAccessToken: getAccessToken
}token单独封装出来使用，借助promise的异步处理，是处理思路明确了一点。有一点不友好的是，引入了一个es6_promise包，增加了小程序整体的大小，这个虽然说是无可厚非的，但是为了token的使用就去用一个包很不划算。
于是又开始捯饬了些时间：
3.Token3.0
通过事件订阅的方式去做了token的封装，用设计模式去处理token的发布：
手写了一个小小的发布订阅方法，使得代码量又减少了一点。
/**
* MessageCenter.js
*/
function MessageCenter() {
let message = {};
this.register = function (messageType) {
if (typeof message[messageType] == 'undefined') {
message[messageType] = [];
} else {
console.log("消息已被注册");
}
}
this.subscribe = function (messageType, func) {
if (typeof message[messageType] != 'undefined') {
message[messageType].push(func);
} else {
console.log("消息未注册，不能进行订阅");
}
}
this.fire = function (messageType, args) {
if (typeof message[messageType] == 'undefined') {
console.log("消息未注册，不能进行订阅");
return false;
}
let events = {
type: messageType,
args: args || {}
}
message[messageType].forEach(function (item) {
item(events);
})
}
}
module.exports={
MessageCenter:MessageCenter
}/**
*AuthProvider.js
*/
import {MessageCenter} from './MessageCenter';
import {getToken, refreshToken} from './token';
const API = require('./config');
const Promise = require('./es6-promise');
let message = new MessageCenter();
message.register('token');
let params = {
method: 'POST',
token: {
type: 'Basic',
value: API.SECRET
}
}
function onLogin() {
params.unionId = wx.getStorageSync('unionid');
return getToken(params).then((res) => {
saveTokens(res.access_token, res.refresh_token, res.expires_in);
message.fire('token', res.access_token);
return res.access_token
}).catch((req) => {
return 'error'
})
}
function setWait() {
wx.removeStorageSync('access_token');
}
function saveTokens(access_token, refresh_token, expires_in) {
wx.setStorageSync('access_token', access_token);
wx.setStorageSync('refresh_token', refresh_token);
let exp = Date.now();
let expires_ins = exp + expires_in * 1000 - 30000;
wx.setStorageSync('expires_in', expires_ins);
}
function onRefreshToken() {
setWait();
params.refresh_token = wx.getStorageSync('refresh_token');
return refreshToken(params).then((res) => {
if (res.access_token) {
saveTokens(res.access_token, res.refresh_token, res.expires_in);
message.fire('token', res.access_token);
return res.access_token;
} else {
return onLogin().then(res => {
return res
});
}
}).catch(req => {
if (wx.getStorageSync('refresh_token') != null) {
return onLogin().then(res => {
return res
});
}
})
}
function getAccessToken() {
let date = Date.now();
let expires_in = wx.getStorageSync('expires_in');
if ((!expires_in || date >= expires_in) && wx.getStorageSync('access_token')) {
return onRefreshToken()
} else if ((!expires_in || date >= expires_in) && !wx.getStorageSync('access_token')) {
return new Promise((resolve, reject) => {
message.subscribe("token", (event) => {
resolve(event.args)
});
})
} else {
return new Promise((resolve, reject) => {
resolve(wx.getStorageSync('access_token'))
})
}
}
module.exports = {
onLogin: onLogin,
getAccessToken: getAccessToken
}当然中间调试的版本有很多啦，因为开发的小程序很多，目前线上使用的就这三个，看起来效果都还可以，没有出现同时多次刷新token情况。
后续有更新会及时补充。
前端小白，抛砖引玉...
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
