【经验】uniapp实现登录界面跳转拦截

962 阅读1分钟

第一步:设置拦截路径的白名单

由于受拦截的路径比不受拦截的路径少,所以设置拦截路径白名单,用于判断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'