Vue.js和微信小程式路由（頁面）跳轉攔截

TDon發表於2017-11-06
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) {
       // ...
    },
    // ...
}));

總結

相比Vue.js官方提供的路由攔截功能，自己實現微信小程式的路由攔截還是存在一定的不足。比如：

  1. 微信小程式需要進行路由攔截的每個頁面都需要引入，幷包裝一層，使用起來還是比較繁瑣的。
  2. Vue.js是每次跳轉到新的路由（頁面）前進行處理，校驗通過會跳轉到新頁面，不通過則直接跳轉到登陸頁面；而微信小程式這裡，會先跳轉到新頁面，校驗不通過會再次跳轉到登陸頁面。

目前在微信小程式這方面如果有比較好的解決方案的話，可以相互交流一下。

路由跳轉攔截是一個非常常用的功能，希望後續微信小程式官方能給出一個比較好的官方解決方案。

相關文章