uniapp 结合 uview2 做路由拦截

需求分析

进去我们项目有个需求，进入一些特定的页面，需要判定是否有token。也就是需要一个全局的路由去做处理。

解决思路

因为项目里面，大部分都是用的uview封装好的路由（链接：route 路由跳转 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (uviewui.com)）。 所以不想改太多的代码，于是找到uview的源码，想在他上面去做处理，结果发现其实uview是有去做这方面的东西的，但是官方文档没写出来。。。无语ing....

我们看到，他是有暴露出来一个routeIntercept，那这样就好做很多了，直接上代码

import store from '@/store'
// 定义需要判断的路由
const rules = ['/subPackages/user/user-personal/user-personal',]

const banList = ['/subPackages/user/service/complaintMsg']
const install = function () {
	uni.$u.routeIntercept = function (mergeConfig, resolve) {
		const {
			state: {
				user: { token },
			},
		} = store
		const url = mergeConfig.url.split('?')
		const isRules = rules.includes(url[0])
		const isBan = banList.includes(url[0])
		if (isBan) {
			uni.$u.toast('敬请期待')
			return isBan
		}
		const { isToken = true } = mergeConfig
		if (isRules && isToken) {
			if (token) {
				resolve(!!token)
			} else {
				uni.$u.route({
					url: 'subPackages/start/login/index',
				})
			}
			return !!token
		}
		resolve(true)
	}
}
export default install

然后在main.js引入 import plugins from './plugins' Vue.use(plugins)

最终我们的路由拦截就完成了，只需要在我们写好的插件里面，把页面路径加上即可判断...，方法里面可以自定义自己的业务逻辑...