微信小程序自动登录逻辑分析与实现，页面黑白名单管理（上）
一、 需求与逻辑分析
产品需求为进入小程序，实现用户的自动登录。由于已经完成了app端和h5端的产品，用户登录也加入了第三方登录，在后台区分用户是根据手机号，因此各个平台的登录最主要的是与手机号绑定。而qq，微信公众号和小程序平台决定用互通的unionId，不使用OpenId登录，最终将uniodId与对应的手机号关联。
小程序平台有两种登录方式，一种是账户密码登录，另一种是微信自动登录。
登录页面
登录页面逻辑展现
二、自动登录的切入点和冲突
将登录页作为初始页，在进入登录页时先执行自动登录，如果通过wx.login可以获取uniodId，用户也绑定了手机号，就可以成功登录，否则跳转相应的页面。
起初是决定将自动登录放进app.js的生命周期onShow里执行，保证每次进入小程序都可以执行自动登录，但是这里就有了冲突。
如果是进入了其他页面，例如登录页->a->b->c，这时候突然退出刷了下微博，小程序进入了后台状态，再进入小程序，还是c页面，但这时候app.js也会重新执行。
假定c页面是我的资料页面，接口也会审查用户登录状态，未登录c.js的处理逻辑是跳转登录页。app.js和c.js是异步的，这俩js都检查到了用户未登录状态，这时候就会导致跳转两次登录页。
删除掉c.js接口相关的判断显然是不合理的。那么该如何处理这种app.js和进入的页面.js的冲突呢？
两种方案：
1.只有在确保初始页为登录页时，也就是确保小程序为重新进入，onLaunch才执行自动登录。其他的等待页面接口判断用户是否登录，再跳转用户登录。这种的坏处是其他页面需要增加的逻辑比较多，稍微复杂。或者直接将自动登录的逻辑写在登录页即可。
2.进入小程序onLaunch执行登录，其他情况自动登录根据页面黑白名单验证的判断，在需要判断登录的页面加上登录状态过滤，进入页面需要登录的就用loginCheck，点击页面某个方法判断未登录状态跳转登录的调goLogin。大型项目提前做好构建后续会省事很多（由于篇幅原因，第二种方案我会另写一篇文章）。
3.将app.js和需要判断用户登录状态页面.js的异步操作改成同步，这样确保app.js执行完登陆后再处理其他页面逻辑，就不会造成重复登录的状态。
三、使用
1.如果小程序页面较少，单个页面处理逻辑也很方便，采用第一种方案：
//app.js
App({
onLaunch: function () {
this.firstLogin();
},
firstLogin: function () {
let that = this;
wx.login({
success: res => {
if (res.code) {
ajax.request({
url: '/api/system/wx?code=' + res.code,
method: 'get',
success: res => {
if (res.statusCode == 200 && res.data.openid) {
that.globalData.openId = res.data.openid;
let nowRoute = ajax.getCurrentPageUrlWithArgs();
// 判断当前页是否为入口登录页，如果是，自动登录；如果不是，等待用户在页面的操作判断接口是否需要登录
if (nowRoute == '/pages/login/index') {
// 如果有unionid就自动登录
if (res.data.unionid) {
that.goLogin(res.data.unionid);
} else {
// F-1-2-3:判断当前是否是登录页，不是跳转登录页
// 当前页保存在缓存
let nowRoute = ajax.getCurrentPageUrlWithArgs();
wx.redirectTo({
url: '/pages/login/index'
})
}
}
}
},
fail: function (error) {
console.log(error)
}
});
} else {
// 微信登录失败
wx.showToast({
title: '网络异常，请稍后重试',
duration: 2000,
icon: 'none'
})
}
},
fail: res => { },
complete: res => { },
})
},
// 微信登录
goLogin: function (unionid) {
let that = this;
ajax.request({
url: '/api/user/第三方登录',
data: {
LoginType: 'weixin',
unionid: unionid
},
method: 'post',
success: res => {
// unionid保存在全局，保存手机号
that.globalData.unionid = unionid;
if (that.unionidCallback) {
that.unionidCallback(unionid);
}
if (res.statusCode == 200) {
if (res.data.code == 0 && res.data.data.usertoken) {
// 登录成功，保存相关信息，跳转首页
wx.redirectTo({
url: "/pages/index"
})
} else if (res.data.code == -1){
//用户未绑定手机号，选择绑定手机或者使用账户密码登录
wx.showModal({
title: '提示',
content: '该微信账户未绑定手机号，是否使用账户密码登录？',
cancelText: '密码登录',
confirmText:'绑定手机',
success(res) {
if (res.confirm) {
// 绑定手机号
wx.redirectTo({
url: '/pages/login/phone/index'
})
} else if (res.cancel) {
// 使用账户密码登录
wx.redirectTo({
url: '/pages/login/index'
})
}
}
})
} else{
wx.showToast({
title: '网络异常，请稍后重试',
duration: 10000,
icon: 'none'
})
}
}
},
fail: function (error) {
console.log(error)
wx.showToast({
title: '登录失败，请检查网络稍后重试',
duration: 2000,
icon: 'none'
})
}
});
},
globalData: {
openId: '',
unionid: '',
}
})
重点贴一下无unionid跳转的中间授权页的代码，解密encryptedData用了decryption.js+crypto.js
中间页授权获取unionid
// decryption.js
const CryptoJS = require('./crypto-js/crypto-js.js');
// 获取用户信息解密
function decryptUserInfo(session_key, encryptedData, iv) {
// var encryptedData = CryptoJS.enc.Base64.parse(encryptedData);
var key = CryptoJS.enc.Base64.parse(session_key);
var iv = CryptoJS.enc.Base64.parse(iv);
try {
// 解密
var decrypted = CryptoJS.AES.decrypt(encryptedData, key, {
asBpytes: true,
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
var decryptResult = CryptoJS.enc.Utf8.stringify(decrypted).toString();
var value = JSON.parse(decryptResult);
} catch (err) {
console.log(err);
}
return value;
}
module.exports = {
decryptUserInfo: decryptUserInfo
}
// pages/fastlogin/fastlogin.js
const app = getApp();
const jiemi = require('../../../utils/decryption.js');
Component({
/**
* 组件的初始数据
*/
data: {
nickname: '',
photopath: '',
gender: ''
},
/**
* 组件的方法列表
*/
methods: {
// 1.关注用户是否授权，未授权页面停留，授权后获取加密信息
onGotUserInfo(e) {
let that = this;
if (e.detail.errMsg == "getUserInfo:ok") {
console.log(e, '已经授权用户信息');
this.getLcode(e.detail.encryptedData, e.detail.iv);
} else {
console.log("用户未同意授权")
}
},
// 2.解密unionId
getLcode(encryptedData, iv) {
let that = this;
wx.login({
success: res => {
if (res.code) {
ajax.dotnetRequest({
url: '/api/system/WX?type=2&code=' + res.code,
method: 'get',
success: sessionRes => {
if (sessionRes.statusCode == 200 && sessionRes.data.session_key) {
// 2-1:解密unionid
let jiemiRes = jiemi.decryptUserInfo(sessionRes.data.session_key, encryptedData, iv);
let unionId = jiemiRes.unionId;
// 2-2:获取成功，执行登录
if (unionId) {
app.goLogin(unionId)
}
}
},
fail: function (error) {
console.log(error)
}
});
} else {
console.log(res, 'code获取失败');
}
},
fail: res => {
console.log(res, 'code获取失败');
},
complete: res => { },
})
},
}
})
···
