|
前言
在開發有登錄功能的項目時，不可避免的需要在路由（頁面）跳轉時對當前用戶的權限進行一定的校驗。目前我使用的比較多的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是每次跳轉到新的路由（頁面）前進行處理，校驗通過會跳轉到新頁面，不通過則直接跳轉到登陸頁面；而微信小程序這里，會先跳轉到新頁面，校驗不通過會再次跳轉到登陸頁面。 目前在微信小程序這方面如果有比較好的解決方案的話，可以相互交流一下。
路由跳轉攔截是一個非常常用的功能，希望后續微信小程序官方能給出一個比較好的官方解決方案。
|
