Vue.js和微信小程序路由（页面）跳转拦截

前言

在开发有登录功能的项目时，不可避免的需要在路由（页面）跳转时对当前用户的权限进行一定的校验。目前我使用的比较多的Vue.js提供了比较好的解决方案。在开发微信小程序时，发现官方目前并未提供相应的解决方案，根据以往的经验自己实现了路由（页面）跳转拦截。在此对两者做一个简单的对比。

Vue.js的路由拦截

Vue.js官方称之为导航守卫。官方文档很详细，使用起来也比较简单，此处就不多说了，简单的示例代码如下：

// routes/index.js
const router = new Router({
    routes: [{
            path: '/',
            name: 'Login',
            component: Login
        },
        {
            path: '/user',
            name: 'User',
            component: User,
            meta: {
                requireAuth: true
            }
        }]
});

// 全局导航钩子
router.beforeEach((to, from, next) => {
    // meta.requireAuth为true时才进行校验
    if (to.meta.requireAuth) {
        // 此处使用vuex进行校验，具体根据业务需求来
        store.dispatch('checkAuth');
        if (!store.state.checkAuth) {
            // rediect是为了登录后重定向到当前页面
            next({
                path: '/',
                query: {
                    redirect: to.fullPath
                }
            });
        } else {
            next();
        }
    } else {
        next();
    }
});

微信小程序的路由拦截

因为微信小程序官方并没有提供官方的解决方案，所以这里只能自己去实现一个。如果对node.js比较熟悉的话，应该对express/koa框架中的经常提到的中间件概念比较熟悉，这里就使用中间件的机制来处理。结合小程序中Page()函数和生命周期，具体代码如下：

// utils/filter.js
function loginCheck(pageObj) {
    if (pageObj.onLoad) {
        let _onLoad = pageObj.onLoad;
        // 使用onLoad的话需要传递options
        pageObj.onLoad = function (options) {
            if(wx.getStorageSync('USERID')) {
                // 获取当前页面
                let currentInstance = getPageInstance();
                _onLoad.call(currentInstance, options);

            } else {
                //跳转到登录页
                wx.redirectTo({
                    url: "/pages/login/login"
                });
            }
        }
    }
    return pageObj;
}

// 获取当前页面    
function getPageInstance() {
    var pages = getCurrentPages();
    return pages[pages.length - 1];
}

exports.loginCheck = loginCheck;

以上，通用的过滤函数就写好了。在需要使用的页面引入该方法即可：

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