基于Taro框架的微信小程序JWT授权登录方案
小程序这两年可谓是风风火火，已经涉及到了行业的方方面面，作为一枚前端码农，为了紧跟时代的步伐，满足市场的需要，楼主也步入了小程序的坑中，一探究竟，从最初的原生开发，过渡到 WePY 的引入，又转到了 mpvue 的框架，最近又准备踩踩 Taro 的坑 了~
之所以从 mpvue 框架迁移到 Taro 框架，一是由于该框架是京东凹凸实验室开发维护的，目前来看比较活跃，更新迭代速度比较快，质量上有一定的保障；二是该框架支持多端统一，一劳永逸，为后面拓展H5等其他业务奠定基础~
因业务需求，我们采用 JWT 进行身份鉴权，所以才有了这篇 JWT 授权登录 解(cai)决(keng)方(zhi)案(nan)，如果对 JWT 还不是很了解的小伙伴，请猛戳 这里 ~
ok，不废话了，直接进入你们最想看到代码环节~
正文
关于 Taro 的安装的使用，我这里就不再赘述了，具体的步骤可以参考 官网 给出的教程，我们直接来看看授权登录这一块~
FBI WARNING : 本文相关的代码是跟楼主目前公司的有些业务场景有关，如有不同，请自行更改即可~
初始化 Taro 项目时，我们需要选择使用 Redux 模版，进行状态管理，然后默默等待依赖安装完成，通过 npm run dev:weapp 命令就可以启动我们的小程序服务了~
接下来跟着我的步骤走下去~
step1
首先，我们需要使用到 Redux 定义一些 app 相关的数据，方便我们后面的判断和使用~
Redux 三步走， reducer 、 constant 、 action 我这里就直接贴代码了~
-
constants目录
//constants app.js //更改app登录状态export const CHANGE_APP_ON_LAUNCH = 'change_app_on_launch'; //写入授权信息export const INSERT_AUTHORIZE = 'insert_authorize';
-
actions目录
// actions app.js
import * as constants from '../constants/app'//更改登录状态export const changeAppOnLaunch = () => ({type : constants.CHANGE_APP_ON_LAUNCH
})
//写入请求tokenexport const insertToken = (authorize) => ({type : constants.INSERT_AUTHORIZE ,
authorize
})
-
recuders目录
import * as constants from '../constants/app'const INITIAL_STATE ={
//请求接口域名地址
baseURL : 'https://xx.xxx.xx/' ,
//应用首次加载
appOnLaunch : true ,
//请求token
authorize : ''}export default function app( state = INITIAL_STATE , action ){
switch (action.type){ case constants.CHANGE_APP_ON_LAUNCH :return {
...state ,
appOnLaunch : false}; case constants.INSERT_AUTHORIZE :return {
...state ,
authorize : action.authorize
};
default :return state;
}
}
最后不要忘记将其通过 combineReducers 方法合并到 Redux 里面去~
为了方便后面的使用，这里我在入口文件 app.js 中将 store 直接挂在到了 Taro 对象上，这样我们也就可以在后面通过 Taro.$store 这种方式直接获取进行操作处理，即：
//app.js
componentDidMount() {
//将redux状态挂载到 Taro 对象上，方便使用
Taro.$store = store;
}
step2
我们在 src 创建一个 utils 文件夹，用来存放我们一些公用的方法之类的文件~
由于微信小程序的限制，我们无法得知用户的登录状态是否过期，所以我们必须要通过 wx.checkSession 来接口检测当前用户登录态是否有效，做对应的逻辑处理~
因此，我们创建一个 auth.js 文件，用来微信登录，获取获取授权信息，其流程可以参考官方的这张时序图！
我们的 JWT 就是上面图所提到的自定义登录状态，它一般是长这样的
其中 exp 是令牌过期时间， iat 令牌签发时间， nbf 令牌生效时间， token 是用户状态，包含用户的身份信息，我们主要会用到 exp 和 token 两个字段，用来判断令牌是否过期和发送请求携带用户身份~
因此，我的做法是，在用户进入小程序的时候通过 Taro.checkSession() ，检查 session_key 是否过期，如果过期需要通过 Taro.login() 重新登录进行授权，获取 JWT 授权信息，否则就判断用户的令牌是否过期，如果过期就要重新刷新令牌，重新获取，其代码如下~
// auth.js
import Taro from '@tarojs/taro'import { insertToken , changeAppOnLaunch } from '../actions/app'//获取数据export default class Auth {
//app授权
static appCheckAuth(){return new Promise(function (resolve) {
const state = Taro.$store.getState();
//如果有授权信息 if( Auth.checkAuth() && !state.app.appOnLaunch ){
//直接返回
resolve(true);
}else{
//判断session_key是否过期
Taro.checkSession().then(async ()=>{
//未过期检查token是否有效if( !Auth.checkAuth() ){
//判断是否 token 请求成功let flag = await getAuthToken();if( flag ) {
//更新app状态
Taro.$store.dispatch(changeAppOnLaunch());
resolve(true);
}else{
//提示
Taro.showToast({
title : '获取授权信息失败' ,
icon : 'none' ,
mask : true})
}
}else{
//更新app状态
Taro.$store.dispatch(changeAppOnLaunch());
//token 没有过期，直接返回
resolve(true);
}
}).catch(async (err)=> {
console.log(err); let flag = await getAuthToken();
//判断是否 token 请求成功 if( flag ) {
//更新app状态
Taro.$store.dispatch(changeAppOnLaunch());
resolve(true);
}else{
//提示
Taro.showToast({
title : '获取授权信息失败' ,
icon : 'none' ,
mask : true})
}
})
}
})
}
// 检查令牌是否有效 true--> 有效 false--> 无效
static checkAuth(){
const state = Taro.$store.getState();
//从缓存读取授权信息let authorize = state.authorize || Taro.getStorageSync('authorize') || {},
expiryTime = 0,
nowTime = ~~(Date.now() / 1000);
if (authorize.exp) {
expiryTime = authorize.exp;
}
return expiryTime - nowTime > 300;
}
//获取token
static getToken(){
const state = Taro.$store.getState(); let authorize = state.authorize || Taro.getStorageSync('authorize'); return authorize.token;
}
}
//授权用户 token
async function getAuthToken(){
const state = Taro.$store.getState();
//login let res = await Taro.login();
//获取token let response = await Taro.request({
url : `${state.app.baseURL}api/xxx/xxx` ,
data : {
code : res.code
} ,
method : 'POST'
})
//判断是否成功if( response.data.data && response.data.data.authorize ){
//写入tokenlet authorize = response.data.data.authorize;
saveAuthToken(authorize);return true;
}else{
console.log('获取token失败');return false;
}
}
//写入信息function saveAuthToken (authorize) {
//写入状态管理
Taro.$store.dispatch(insertToken(authorize));
//写入缓存
Taro.setStorageSync('authorize',authorize)
}
上面总共定义不少方法，我都有注释，相信大家也都能看懂，其主要思想就是，如果用户首次进入小程序，通过 login 进行登录，并将令牌存入本地，后面通过 getToken 方法进行获取请求的令牌，以后用户在进入小程序的时候，就进行授权信息和登录状态检测，如果登录过期或者令牌过期则通过 getAuthToken 方法进行请求，获取最新的身份令牌！
上面之所以要触发一次 changeAppOnLaunch 是因为用户每次进入需要进行一次 checkSeesion 检测，如果用户本次 session_key 未过期，一般来说本次小程序生命周期内就就不需要在进行 checkSession 检测了，因此我们用一个状态来标识用户是否是重新进入小程序~
step3
假定我们的页面的初始化请求都写在 componentDidMount 生命周期内，那么现在我们要做的就是要在页面接口请求之前去判断是否已经获取到 token ，如果有 token 则进行正常的接口请求，否则就通过上面的登录获取 token ，不然就会导致接口未携带令牌而发生错误~
那么问题来了，我们如何阻塞 componentDidMount 而保证每次接口请求之前都已经拿到了 token 呢，这里我的做法就是对 Component 进行二次封装，采用的是 ES7 提供的 装饰器 ，关于装饰器的使用，可以瞄一眼这篇 文章 ~
通过装饰器，我们可以将 Component 进行二次封装，可以根据业务情况将授权、分享等全部进行归一化处理，这里我们创建一个 pageInit.js ，来实现这个功能~
//pageInit.js
import Taro from '@tarojs/taro'import auth from '../utils/auth'function pageInit() {return function Component(Component) {return class extends Component {
constructor (props){
super(props);
}
//onLoadcomponentWillMount(){
//初始分享信息
initShareMenu(this.state);
}
//阻塞 didMount ， 鉴权
async componentDidMount() {let result = await auth.appCheckAuth();
//授权成功if( result ){
//调用父组件的函数
super.componentDidMount && super.componentDidMount();
}else{
//授权失败
Taro.showToast({
title : '授权失败' ,
icon : 'none' ,
mask : true })
}
}
//重写分享onShareAppMessage(){let shareOptions = super.onShareAppMessage();
//如果当前页面配置分享使用配置的if( shareOptions ) return shareOptions;
//默认分享return {
title : '默认分享内容'}
}
//重新下拉刷新onPullDownRefresh(){if(super.onPullDownRefresh){
super.onPullDownRefresh(); setTimeout(() => {
Taro.stopPullDownRefresh();
}, 1500)
}
}
}
};
}
/**
* 初始化分享信息
*/function initShareMenu (state) {
// 初始化页面分享信息if ( state && state.canShare ) {
Taro.showShareMenu({
withShareTicket: false })
} else {
Taro.hideShareMenu();
}
}export default pageInit;
核心思想是，通过 async 和 await 阻塞，让其先执行自身的 componentDidMount 方法，拿到授权信息后，在调用父类的 componentDidMount 方法，这样就可以保证授权信息获取到再进行接口请求了~
我们要做的就是在页面内通过 @pageInit() 进行装饰即可~
这里我做了个测试，在清空全部授权信息后，在页面进行一次接口请求，可以看到先执行的是 lite 获取用户令牌，然后进行页面的接口请求，保证了执行顺序不会错乱~
小结
ok，到此为止，我们基本上已经算是完成了整套体系，接下来就是在接口请求中加上 token 就好了，这里我就补不贴代码了~ 完成的代码可去仓库自行 查看 ~
Taro 对于我来说，也算是属于初探，这篇文章也是希望能给跟我一样萌新的小伙伴一个抛砖引玉的作用，如果有哪里写的不对的地方，还请批评斧正~
About The Author
maynard
懒散，不想无聊