uniapp使用addInterceptor进行路由拦截

1.新建js文件 router-interception.js

/**
 * @description 自定义路由拦截
 */

// 白名单
const whiteList = [
	'/', // 注意入口页必须直接写 '/'
	// { pattern: /^\/pages\/list.*/ }, // 支持正则表达式
	'/pages/classify/classify',
	'/pages/details/details',
	{
		pattern: /^\/pages\/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) {
				const url = e.url.split('?')[0]// 获取要跳转的页面路径（url去掉"?"和"?"后的参数）
				// console.log('url路由拦截-地址', url)
				if(url!=='/pages/login/login'){ //并缓存要去的页面路由以便用户登录成功后直接跳转
					uni.setStorageSync('toRouter', url)
					// console.log('不是login')
				}
				
				
				let pass
				if (whiteList) {// 判断当前窗口是白名单，如果是则不重定向路由
					pass = whiteList.some((item) => {
						if (typeof(item) === 'object' && item.pattern) {
							return item.pattern.test(url)
						}
						return url === item
					})
				}
				let userInfo = uni.getStorageSync('userInfo')
				// console.log('url路由拦截-用户缓存', pass, userInfo, !userInfo)
				// 不是白名单并且没有token
				if (!pass && !userInfo) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				return e
			},
			fail(err) { // 失败回调拦截
				console.log(err)
			}
		})
	})
}

2.在App.vue中引入并全局使用router-interception.js

<script>
	import routerInterception from '@/utils/router-interception.js'
	export default {
		onLaunch: function() {
			routerInterception()
			console.log('App Launch')
		},

.......
</script>

3.在登录页表单校验成功后调用登录接口，接口调用成功后存储用户信息或者token