|
前言
在开发有登录功能的项目时，不可避免的需要在路由（页面）跳转时对当前用户的权限进行一定的校验。目前我使用的比较多的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.js官方提供的路由拦截功能，自己实现微信小程序的路由拦截还是存在一定的不足。比如：
微信小程序需要进行路由拦截的每个页面都需要引入，并包装一层，使用起来还是比较繁琐的。 vue.js是每次跳转到新的路由（页面）前进行处理，校验通过会跳转到新页面，不通过则直接跳转到登陆页面；而微信小程序这里，会先跳转到新页面，校验不通过会再次跳转到登陆页面。 目前在微信小程序这方面如果有比较好的解决方案的话，可以相互交流一下。
路由跳转拦截是一个非常常用的功能，希望后续微信小程序官方能给出一个比较好的官方解决方案。
|
