uni-app是如今前端开发中常见的多端框架之一，基于该框架可以极大程度的减轻程序员的工作量。

本篇文章就来介绍在uni-app中如何实现页面跳转前进行，路由检测并拦截。

路由检测并拦截常见应用于部分页面需要登录后或者会员等级才能查看，通过路由检测获取用户是否登录或者具备该资质进行跳转页面反馈未登录或等级不足等状态信息。

一、创建路由控制js文件

    utils文件夹下创建permission.js，并复制如下代码。

/**
 * @description 自定义路由拦截
 */
// 白名单即不需要验证的页面路径
const whiteList = [
	'/pages/index/index',
	// {
	// 	pattern: /^\/pages\/login\/login\/*/
	// } //支持正则表达式
]
 
export default async function() {
	const list = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab']
	// 用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
	list.forEach(item => {
		uni.addInterceptor(item, {
			invoke(e) {
				// 获取要跳转的页面路径（url去掉"?"和"?"后的参数）
				const url = e.url.split('?')[0]
				// 判断当前窗口是白名单，如果是则不重定向路由
				let pass
				if (whiteList) {
					pass = whiteList.some((item) => {
						if (typeof(item) === 'object' && item.pattern) {
							return item.pattern.test(url)
						}
						return url === item
					})
				}
				// 不是白名单并且没有token
				if (!pass && !uni.getStorageSync('token')) {
					uni.redirectTo({
						url: "/pages/login"
					})
					return false
				}
				return e
			},
			fail(err) { // 失败回调拦截
				console.log(err)
			}
		})
	})
}

二、在App.vue中进行使用路由拦截配置

<script>
	import routingIntercept from '@/utils/permission.js'
	export default {
		onLaunch:async function() {
			routingIntercept()
		},
	}
</script>

通过上述步骤便实现了，在uni-app中对页面跳转前进行监听。检测是否符合要求，符合则继续，不符合就跳转至登录页面。