uniapp路由拦截二级页面方法

• 目录结构

  ├── utils                      		
  │   └── routingIntercercept.js   # 路由拦截器
  └── App.vue     
  

• uniapp中的拦截器 uni.addInterceptor()

  • 详解见官网

一、定义路由拦截器

• 在 utils 文件夹中，创建 routingIntercercept.js 文件

  /* 设置页面白名单，白名单中的页面不做拦截 */
  // 页面白名单(一级和登录页面)  
  const whiteList = [
  	'/pages/tabbars/home',
  	'/pages/tabbars/mine',
  	'/pages/the-login/the-login'
  ]
  
  export default {
  	init() {
          /* 我只拦截二级页面，所以relaunch和switchTab在这里不做拦截 */
  		const list = ['navigateTo', 'redirectTo'] 
  		list.forEach(item => { // 遍历list为路由方式添加拦截器
  			uni.addInterceptor(item, {
  				invoke(e) { // 页面跳转前拦截
  					console.log(e);
  					// 去除url中'?'及后面的参数
                      /* 按'?'拆分成字符串数组，取第一个元素（去掉分隔符及分隔符后的）*/
  					const url = e.url.split('?')[0]
  					// 判断在白名单中，不拦截 (有则返回true，无则返回false)
  					const approve = whiteList.includes(url)
  					// console.log(approve)
  					if (approve) {
  						return e
  					} else {
  						console.log('不在白名单中')
                        	/* 若要赋值并使用Storage中的值，必须使用getStorageSync */
  						// 获取用户Token
  						const token = uni.getStorageSync('userToken')
  						// 判断无token，拦截
  						console.log(token)
  						if (token.length === 0) {
  							uni.showToast({
  								title: '请先登录',
  								icon:"none"
  							})
                              /* 延迟跳转页面，解决提示在真机中一闪而过 */
  							setTimeout(() => {
  								uni.hideToast();
  								// 关闭提示后跳转登录
  								uni.navigateTo({
  									url: '/pages/the-login/the-login'
  								})
  							},1200)
  							return false
  						} else {
  							return e
  						}
  					}
  				},
  				fail(err) { // 失败回调拦截
  					console.log(err)
  				}
  			})
  		})
  	}  
  }
  

二、使用拦截器

• 在 App.vue 文件的 onLaunch 方法中调用

  <script>
  	import routingIntercept from '@/utils/routingIntercept.js'
  	export default {
  		onLaunch: function() {
  			console.log('App Launch')
              // 路由拦截
  			routingIntercept.init()
  		},
  		onShow: function() {
  			console.log('App Show')
  		},
  		onHide: function() {
  			console.log('App Hide')
  		}
  	}
  </script>