uniapp原生路由拦截

我们在写uniapp的项目时如果不用第三方插件，用官网的路由跳转，就需要自己用官网的一个api制作路由拦截器。贴一张官网的图

 贴个官网链接：uni.addInterceptor(STRING, OBJECT) | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/api/interceptor.html#

第一步：新建一个js文件

 

import {
	getToken
} from '@/utils/auth'  //用于检查是否有token的函数

// 登录页面
const loginPage = "/pages/Login/Login"

// 页面白名单
const whiteList = [
	'/pages/Login/Login', '/pages/common/webview/index'
]

// 检查地址白名单
function checkWhite(url) {
	const path = url.split('?')[0]
	return whiteList.indexOf(path) !== -1
}

// 页面跳转验证拦截器
let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"]
list.forEach(item => {

	uni.addInterceptor(item, {
		invoke(to) {
			if (getToken()) {
				if (to.url === loginPage) {
					uni.reLaunch({
						url: "/pages/Login/Login"
					})
				}
				return true
			} else {
				if (checkWhite(to.url)) {
					return true
				}
				uni.reLaunch({
					url: loginPage
				})
				return false
			}
		},
		fail(err) {
			console.log(err)
		}
	})
})

 贴一下获取token的函数

 第二步：在全局main.js文件中导入

 第三步：在app.vue文件中监听h5浏览器页面地址栏直跳转