Uniapp实现路由拦截和页面跳转拦截

1.创建interceptor.js

let config = {
	//不需要登录的页面,白名单
	whiteList: [
		'/pages/login/login',
		'/api/login'
	],
	//登录页
	loginPage: "/pages/login/login"
}
//export default function routingIntercept() {
export default function routingIntercept() {
	
	// 1、H5路由拦截,用于拦截用户地址栏输入地址
	let token= uni.getStorageSync('token');
	let locationUrl = window.location.href.split("/#")[1]
	if(!config.whiteList.includes(locationUrl)&&(token=='' || token=='false'|| token==null)){
	    uni.navigateTo({
	        url:"/pages/login/login"
	    })
	
	}	
	
	///2、uniapp跳转页面路由拦截器
	 
	let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab","navigateBack"];
	list.forEach(item => { //用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
		uni.addInterceptor(item, {
			invoke(e) { // 调用前拦截				
				const token = uni.getStorageSync('token'),		//获取用户的token				
				url = e.url.split('?')[0];//获取要跳转的页面路径（url去掉"?"和"?"后的参数）		
	
				let notNeed = config.whiteList.includes(url)				
				// 如果在whiteList里面就不需要登录
				if (notNeed) {					
					return e
				} else {
					if (token=='' || token=='false'|| token==null) {
						uni.navigateTo({url: '/pages/login/login'})//跳转到错误页
						return false
					} else {
						return e
					}
				}
 
			},
			fail(err) { // 失败回调拦截 
				console.log(err);
 
			}
		})
	})
 
 
}

根据判断缓存中是否含有token和白名单内容，进行拦截和放行操作

2.App.vue

<script>

		import routingIntercept from '@/components/interceptor.js'
		export default {
			onLaunch: function() {			
				console.log('App Launch')
			
	 
			},
			onShow: function() {
				console.log('App Show')
				routingIntercept();
				},
				}
</script>

在App.vue引入js使其生效，注意引入时的路径对应。