前言 
在(zài)開發有登錄功能的(de)項目時(shí)，不(bù)可避免的(de)需要(yào / yāo)在(zài)路由（頁面）跳轉時(shí)對當前用戶的(de)權限進行一定的(de)校驗。目前我使用的(de)比較多的(de)vue.js提供了(le／liǎo)比較好的(de)解決方案。在(zài)開發微信小程序時(shí)，發現官方目前并未提供相應的(de)解決方案，根據以(yǐ)往的(de)經驗自己實現了(le／liǎo)路由（頁面）跳轉攔截。在(zài)此對兩者做一個(gè)簡單的(de)對比。

vue.js的(de)路由攔截 
vue.js官方稱之(zhī)爲(wéi / wèi)導航守衛。官方文檔很詳細，使用起來(lái)也(yě)比較簡單，此處就(jiù)不(bù)多說(shuō)了(le／liǎo)，簡單的(de)示例代碼如下：

// routes/index.js
const router = new Router({
    routes: [{
            path: '/',
            name: 'Login',
            component: Login
        },
        {
            path: '/user',
            name: 'User',
            component: User,
            meta: {
                requireAuth: true
            }
        }]
});
// 全局導航鈎子(zǐ)
router.beforeEach((to, from, next) => {
    // meta.requireAuth爲(wéi / wèi)true時(shí)才進行校驗
    if (to.meta.requireAuth) {
        // 此處使用vuex進行校驗，具體根據業務需求來(lái)
        store.dispatch('checkAuth');
        if (!store.state.checkAuth) {
            // rediect是(shì)爲(wéi / wèi)了(le／liǎo)登錄後重定向到(dào)當前頁面
            next({
                path: '/',
                query: {
                    redirect: to.fullPath
                }
            });
        } else {
            next();
        }
    } else {
        next();
    }
});

微信小程序的(de)路由攔截

因爲(wéi / wèi)微信小程序官方并沒有提供官方的(de)解決方案，所以(yǐ)這(zhè)裏隻能自己去實現一個(gè)。如果對node.js比較熟悉的(de)話，應該對express/koa框架中的(de)經常提到(dào)的(de)中間件概念比較熟悉，這(zhè)裏就(jiù)使用中間件的(de)機制來(lái)處理。結合小程序中Page()函數和(hé / huò)生命周期，具體代碼如下：

// utils/filter.js
function loginCheck(pageObj) {
    if (pageObj.onLoad) {
        let _onLoad = pageObj.onLoad;
        // 使用onLoad的(de)話需要(yào / yāo)傳遞options
        pageObj.onLoad = function (options) {
            if(wx.getStorageSync('USERID')) {
                // 獲取當前頁面
                let currentInstance = getPageInstance();
                _onLoad.call(currentInstance, options);
            } else {
                //跳轉到(dào)登錄頁
                wx.redirectTo({
                    url: "/pages/login/login"
                });
            }
        }
    }
    return pageObj;
}
// 獲取當前頁面    
function getPageInstance() {
    var pages = getCurrentPages();
    return pages[pages.length - 1];
}
exports.loginCheck = loginCheck;

以(yǐ)上(shàng)，通用的(de)過濾函數就(jiù)寫好了(le／liǎo)。在(zài)需要(yào / yāo)使用的(de)頁面引入該方法即可：

// pages/user/user.js
const filter = require('../../utils/filter');
Page(filter.loginCheck({
    // ...
    onLoad: function (options) {
       // ...
    },
    // ...
}));

總結

相比vue.js官方提供的(de)路由攔截功能，自己實現微信小程序的(de)路由攔截還是(shì)存在(zài)一定的(de)不(bù)足。比如：

微信小程序需要(yào / yāo)進行路由攔截的(de)每個(gè)頁面都需要(yào / yāo)引入，并包裝一層，使用起來(lái)還是(shì)比較繁瑣的(de)。 
vue.js是(shì)每次跳轉到(dào)新的(de)路由（頁面）前進行處理，校驗通過會跳轉到(dào)新頁面，不(bù)通過則直接跳轉到(dào)登陸頁面；而(ér)微信小程序這(zhè)裏，會先跳轉到(dào)新頁面，校驗不(bù)通過會再次跳轉到(dào)登陸頁面。 
目前在(zài)微信小程序這(zhè)方面如果有比較好的(de)解決方案的(de)話，可以(yǐ)相互交流一下。

路由跳轉攔截是(shì)一個(gè)非常常用的(de)功能，希望後續微信小程序官方能給出(chū)一個(gè)比較好的(de)官方解決方案。