“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

前言

写过vue项目基本都有了解路由拦截，为了防止用户未登录情况，访问一些页面造成错误。一般我们都需要在这一层做个判断，用户登录后才能看到这个页面，如果未登录，就跳转登录页。在uni-app也提供了一些api方便我们做路由拦截。

如何进行拦截

  uni.addInterceptor(STRING, OBJECT)

这是官方文档 uniapp.dcloud.net.cn/api/interce…

通过文档，我们知道这个方法传入要拦截的api名称即可。

因为我们要实现的是路由的拦截，因此我们这里应该传入路由的api名称，uni-app路由相关的api分别有 "navigateTo", "redirectTo", "reLaunch", "switchTab" 所以我们项目初始化的时候对这些api进行拦截初始化。

拦截器实现

新建一个js文件封装拦截器，命名为permission.js。

//白名单 不需要验证token
const whiteList = [
	"/pages/index/index",
	"/pages/index/login",
]
//登录页
const loginPage = "/pages/index/login"
export default function initPermission() {
	/**
	 * 页面跳转拦截器
	 */
	const list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];
	list.forEach(item => { //用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
		uni.addInterceptor(item, {
			invoke(e) { // 调用前拦截
				console.log('拦截', e)
				//获取用户的token
				const token = uni.getStorageSync('token'),
					//获取要跳转的页面路径（url去掉"?"和"?"后的参数）
				url = e.url.split('?')[0];
				let notNeed = whiteList.includes(url)
				// 如果在whiteList里面就不需要登录
				if (notNeed) {
					return e
				} else {
					//需要登录
					if (!token) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						})
						uni.navigateTo({
							url: loginPage
						})
						return false
					} else {
						return e
					}
				}
			},
			fail(err) { // 失败回调拦截 
				console.log(err);
			}
		})
	})



}

定义好白名单，就是不需要拦截的页面，定义好需要拦截的api，对这个api作一个便利，实现拦截，核心方法是invoke，这里要做拦截的处理。

这里首先应该判断当前访问路径是否在白名单，如果在白名单，就不拦截，return 回去。 如果不在白名单，那么判断token是否存在，如果存在则放行，否则跳转登录页。

我们这里打印下路由跳转的时候是否触发了拦截方法，这是跳转页面触发的日志，可以看到已经生效。 注意拦截器代码要在App.vue进行初始化

当我们点击一个不在白名单的页面时候

可以看到拦截器方法触发了2次，因为"/pagesDetail/index/chipHouse"被拦截了，跳转登录界面。

总结

路由拦截在uni-app开发中应该是经常要使用到的，这可以帮助我们省略很多重复代码，不用每次跳转页面写登录判断，或者一些无权限页面被其他人访问到。