js和微信小程序路由（页面）跳转拦截和微信小程序路由（页面）跳转拦截
前言
在开发有登录功能的项目时，不可避免的需要在路由（页面）跳转时对当前用户的权限进行一定的校验。目前我使用的比较多
的vue.js提供了比较好的解决方案。在开发微信小程序时，发现官方目前并未提供相应的解决方案，根据以往的经验自己实现
了路由（页面）跳转拦截。在此对两者做一个简单的对比。
vue.js的路由拦截
vue.js官方称之为导航守卫。官方文档很详细，使用起来也比较简单，此处就不多说了，简单的示例代码如下：
1. // routes/index.js
2. const router = new Router({
3. routes: [{
4. path: '/',
5. name: 'Login',
6. component: Login
7. },
8. {
9. path: '/user',
10. name: 'User',
11. component: User,
12. meta: {
13. requireAuth: true
14. }
15. }]
16. });
17.
18. // 全局导航钩子
19. router.beforeEach((to, from, next) => {
20. // meta.requireAuth为true时才进行校验
21. if (to.meta.requireAuth) {
22. // 此处使用vuex进行校验，具体根据业务需求来
23. store.dispatch('checkAuth');
24. if (!store.state.checkAuth) {
25. // rediect是为了登录后重定向到当前页面
26. next({
27. path: '/',
28. query: {
29. redirect: to.fullPath
30. }
31. });
32. } else {
33. next();
34. }
35. } else {
36. next();
37. }
38. });
微信小程序微信小程序的路由拦截的路由拦截
因为微信小程序官方并没有提供官方的解决方案，所以这里只能自己去实现一个。如果对node.js比较熟悉的话，应该对
express/koa框架中的经常提到的中间件概念比较熟悉，这里就使用中间件的机制来处理。结合小程序中Page()函数和生命周
期，具体代码如下：
1. // utils/filter.js
2. function loginCheck(pageObj) {
3. if (pageObj.onLoad) {
4. let _onLoad = pageObj.onLoad;
5. // 使用onLoad的话需要传递options
6. pageObj.onLoad = function (options) {
7. if(wx.getStorageSync('USERID')) {
评论0