在开发有登录功能的项目时，不可避免的需要在路由（页面）跳转时对当前用户的权限进行一定的校验。目前我使用的比较多的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) {
// ...
},
// ...
}));
更多精彩请关注：Vue专题
