场景

1. 小程序有52个页面，其中13个页面无需任何身份，另外39个页面需要系统角色。对于这39个页面，如果微信用户没有系统角色，则跳转到登录页。
2. 是否有系统角色信息需要通过异步请求来获取。

需求分析&实现

对需求进行抽象，其实要的就是一个过滤器，对小程序页面的访问进行过滤，符合条件的通过，不符合条件进行其他处理。

使用过php的laravel框架的童鞋，肯定一下子就联想到了laravel框架的http中间件:
HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求，例如，Laravel 默认包含了一个中间件来检验用户身份验证，如果用户没有经过身份验证，中间件会将用户导向登录页面，然而，如果用户通过身份验证，中间件将会允许这个请求进一步继续前进。当然，除了身份验证之外，中间件也可以被用来执行各式各样的任务，CORS 中间件负责替所有即将离开程序的响应加入适当的响应头，一个日志中间件可以记录所有传入应用程序的请求。

令人忧桑的是，微信小程序并没有提供针对Page实例的中间件机制。所以只能从Page实例的生命周期处下手。

对于onLoad,一个页面只会调用一次；对于onShow,每次打开页面(比如小程序从后台转到前台)都会调用一次。

onLoad或者onShow钩子函数里，对用户身份进行校验，通过后则拉取该页面需要的数据，否则跳转到登录页。

1. //orderDetail.js
2. onShow: function () {
3. let that = this;
4. //身份校验
5. service.identityCheck(() => {
6. //跳转到登录页
7. wx.redirectTo({
8. url: "/pages/common/login/login"
9. });
10. }, () => {
11. //获取页面数据等等
12. that.getDetail(this.orderId);
13. ...
14. }
15. );
16. },

不过，每个页面都要这样写，重复代码好多啊，侵入性也强。不如用装饰函数（高大上的说法是装饰者模式）来包装一下：

1. //filter.js
2. function identityFilter(pageObj){
3. if(pageObj.onShow){
4. let _onShow = pageObj.onShow;
5. pageObj.onShow = function(){
6. service.identityCheck(()=>{
7. //跳转到登录页
8. wx.redirectTo({
9. url: "/pages/common/login/login"
10. });
11. },()=>{
12. //获取页面实例，防止this劫持
13. let currentInstance = getPageInstance();
14. _onShow.call(currentInstance);
15. });
16. }
17. }
18. return pageObj;
19. }
20.  
21. function getPageInstance(){
22. var pages = getCurrentPages();
23. return pages[pages.length - 1];
24. }
25.  
26. exports.identityFilter = identityFilter;

filter.js用以提供过滤器方法，除了现有的用户身份拦截，后续如果需要其他拦截，可以在这个文件增加。然后，在需要用户身份拦截的小程序页面代码里，用filter.identityFilter处理一下就可以了:

1. //orderDetail.js
2. let filter = require('filter.js');
3. Page(filter.identityFilter({
4. ...
5. onShow: function () {
6. //获取页面数据等等
7. this.getDetail(this.orderId);
8. //...
9. },
10. ...
11. }));

使用Promise进行优化

上面的实现中，每次访问页面，都会执行一次获取用户身份的方法（就是上面代码里的service. identityCheck）。其实没有必要，在小程序启动的时候获取一次就行了。也就是说，放在app.js的onLaunch方法里执行。

每个小程序页面实例化时，一般也会执行异步方法，用来获取页面需要的数据。关键在于，我们需要保证，页面的异步方法 必须在 获取用户身份的异步请求 之后执行。

毋容置疑，Promise最擅长处理异步请求的执行顺序了。主子，快放代码粗来：

1. //app.js
2. App({
3. onLaunch:function(){
4. let p = new Promise(function(resolve,reject){
5. service.identityCheck(resolve,reject);
6. });
7. this.globalData.promise = p;
8. },
9. ...
10. globalData: {
11. promise:null,
12. }
13. });

1. //filter.js
2. const appData = getApp().globalData;
3. function identityFilter(pageObj){
4. if(pageObj.onShow){
5. let _onShow = pageObj.onShow;
6. pageObj.onShow = function(){
7. //改动点
8. appData.promise.then(()=>{
9. //跳转到登录页
10. wx.redirectTo({
11. url: "/pages/common/login/login"
12. });
13. },()=>{
14. //获取页面实例，防止this劫持
15. let currentInstance = getPageInstance();
16. _onShow.call(currentInstance);
17. });
18. }
19. }
20. return pageObj;
21. }

小结

基本实现了小程序页面的用户身份拦截器，但是比起laravel的http中间件还是逊色一些：

1. 需要对每个页面代码包装一层。
2. 即使用户身份校验不通过，小程序也并不会阻塞页面的渲染。假如获取用户身份的异步方法一分钟才执行完，小程序页面还是会展示出来，一分钟之后才跳转到登录页。需要自己增加逻辑，比如在这一分钟内，页面展示空白内容。

嗯，对小程序的新特性保持关注，后面看看怎么改进~