前言
在開(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)單的示例代碼如下:
-
// routes/index.js
-
const router = new Router({
-
routes: [{
-
path: '/',
-
name: 'Login',
-
component: Login
-
},
-
{
-
path: '/user',
-
name: 'User',
-
component: User,
-
meta: {
-
requireAuth: true
-
}
-
}]
-
});
-
-
// 全局導(dǎo)航鉤子
-
router.beforeEach((to, from, next) => {
-
// meta.requireAuth為true時(shí)才進(jìn)行校驗(yàn)
-
if (to.meta.requireAuth) {
-
// 此處使用vuex進(jìn)行校驗(yàn),具體根據(jù)業(yè)務(wù)需求來(lái)
-
store.dispatch('checkAuth');
-
if (!store.state.checkAuth) {
-
// rediect是為了登錄后重定向到當(dāng)前頁(yè)面
-
next({
-
path: '/',
-
query: {
-
redirect: to.fullPath
-
}
-
});
-
} else {
-
next();
-
}
-
} else {
-
next();
-
}
-
});
微信小程序的路由攔截
因?yàn)槲⑿判〕绦蚬俜讲](méi)有提供官方的解決方案,所以這里只能自己去實(shí)現(xiàn)一個(gè)。如果對(duì)node.js比較熟悉的話,應(yīng)該對(duì)express/koa框架中的經(jīng)常提到的中間件概念比較熟悉,這里就使用中間件的機(jī)制來(lái)處理。結(jié)合小程序中Page()函數(shù)和生命周期,具體代碼如下:
-
// utils/filter.js
-
function loginCheck(pageObj) {
-
if (pageObj.onLoad) {
-
let _onLoad = pageObj.onLoad;
-
// 使用onLoad的話需要傳遞options
-
pageObj.onLoad = function (options) {
-
if(wx.getStorageSync('USERID')) {
-
// 獲取當(dāng)前頁(yè)面
-
let currentInstance = getPageInstance();
-
_onLoad.call(currentInstance, options);
-
-
} else {
-
//跳轉(zhuǎn)到登錄頁(yè)
-
wx.redirectTo({
-
url: "/pages/login/login"
-
});
-
}
-
}
-
}
-
return pageObj;
-
}
-
-
// 獲取當(dāng)前頁(yè)面
-
function getPageInstance() {
-
var pages = getCurrentPages();
-
return pages[pages.length - 1];
-
}
-
-
exports.loginCheck = loginCheck;
以上,通用的過(guò)濾函數(shù)就寫好了。在需要使用的頁(yè)面引入該方法即可:
-
// pages/user/user.js
-
const filter = require('../../utils/filter');
-
Page(filter.loginCheck({
-
// ...
-
onLoad: function (options) {
-
// ...
-
},
-
// ...
-
}));
總結(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è)比較好的官方解決方案。
|