第一步:设置拦截路径的白名单
由于受拦截的路径比不受拦截的路径少,所以设置拦截路径白名单,用于判断navigateTo将要跳转的页面是否符合条件。
const whiteList = [
"/pages/mine/collect/collect",
"/pages/mine/footmark/footmark",
"/pages/mine/account/account"
]
第二步:设置拦截判断函数
对于传入的url进行判断,使用config.loginCustomerToken判断是否登录
// 用于判断是否能进行页面跳转
function hasPermission(url) {
if (whiteList.indexOf(url) == -1 || config.loginCustomerToken) {
// 可以跳转
return true
}
// 不能跳转
return false
}
第三步:调用uniapp的拦截器
uni.addInterceptor('navigateTo', {
invoke(e) {
console.log(e);
if (!hasPermission(e.url)) {
uni.reLaunch({
url:this.$routers.pages.login
})
return false
}
return true
}
})
最终代码
新建:interceptor.js文件
const config = require('@/config/index')
/* 页面跳转拦截器 (登录和未登录)*/
// 要拦截页面白名单
const whiteList = [
"/pages/mine/collect/collect",
"/pages/mine/footmark/footmark",
"/pages/mine/account/account",
"/pages/mine/bond/bond",
"/pages/mine/order/order",
"/pages/mine/order/payOrder",
]
// 用于判断是否能进行页面跳转
function hasPermission(url) {
if (whiteList.indexOf(url) == -1 || config.loginCustomerToken) {
// 可以跳转
return true
}
// 不能跳转
return false
}
// 页面跳转拦截器
uni.addInterceptor('navigateTo', {
invoke(e) {
console.log(e);
if (!hasPermission(e.url)) {
uni.reLaunch({
url:this.$routers.pages.login
})
return false
}
return true
}
})
然后在main.js里声明
import '@/utils/interceptor.js'