uniapp原生路由拦截

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

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

第一步：新建一个js文件

拦截的逻辑是，先判断是不是白名单页面，是的话放行，不是的白名单页面判断该有没有拿到token，有token的话就放行，没有的话就是没登录跳转到登录页面让其登录。

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(checkWhite(to.url)){
        	        return true
            }else{
	            if(getToken()){
		            return true
	            }else{
		            uni.reLaunch({
			            url: "/pages/Login/Login"
		            })
		            return true
	            }
            }             
		},
		fail(err) {
			console.log(err)
		}
	})
})

 贴一下获取token的函数，这就是一个在本地存储中获取token的函数封装，其实也可以直接在permission页面直接用 uni.getStorageSync('这里放token的属性名') 获取token

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

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