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

vue.js的路由攔截 
vue.js官方稱之為導(dǎo)航守衛(wèi)。官方文檔很詳細(xì)，使用起來(lái)也比較簡(jiǎn)單，此處就不多說(shuō)了，簡(jiǎn)單的示例代碼如下：

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. // 全局導(dǎo)航鉤子
19. router.beforeEach((to, from, next) => {
20. // meta.requireAuth為true時(shí)才進(jìn)行校驗(yàn)
21. if (to.meta.requireAuth) {
22. // 此處使用vuex進(jìn)行校驗(yàn)，具體根據(jù)業(yè)務(wù)需求來(lái)
23. store.dispatch('checkAuth');
24. if (!store.state.checkAuth) {
25. // rediect是為了登錄后重定向到當(dāng)前頁(yè)面
26. next({
27. path: '/',
28. query: {
29. redirect: to.fullPath
30. }
31. });
32. } else {
33. next();
34. }
35. } else {
36. next();
37. }
38. });

微信小程序的路由攔截

因?yàn)槲⑿判〕绦蚬俜讲](méi)有提供官方的解決方案，所以這里只能自己去實(shí)現(xiàn)一個(gè)。如果對(duì)node.js比較熟悉的話，應(yīng)該對(duì)express/koa框架中的經(jīng)常提到的中間件概念比較熟悉，這里就使用中間件的機(jī)制來(lái)處理。結(jié)合小程序中Page()函數(shù)和生命周期，具體代碼如下：

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')) {
8. // 獲取當(dāng)前頁(yè)面
9. let currentInstance = getPageInstance();
10. _onLoad.call(currentInstance, options);
11.  
12. } else {
13. //跳轉(zhuǎn)到登錄頁(yè)
14. wx.redirectTo({
15. url: "/pages/login/login"
16. });
17. }
18. }
19. }
20. return pageObj;
21. }
22.  
23. // 獲取當(dāng)前頁(yè)面
24. function getPageInstance() {
25. var pages = getCurrentPages();
26. return pages[pages.length - 1];
27. }
28.  
29. exports.loginCheck = loginCheck;

以上，通用的過(guò)濾函數(shù)就寫好了。在需要使用的頁(yè)面引入該方法即可：

1. // pages/user/user.js
2. const filter = require('../../utils/filter');
3. Page(filter.loginCheck({
4. // ...
5. onLoad: function (options) {
6. // ...
7. },
8. // ...
9. }));

總結(jié)

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

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

路由跳轉(zhuǎn)攔截是一個(gè)非常常用的功能，希望后續(xù)微信小程序官方能給出一個(gè)比較好的官方解決方案。