前言

uniapp提供了uni.addInterceptor方法在触发路由跳转时可以拦截，在做商城的时候限制未登录的用户访问一些页面，用这个处理起来很方便。

使用示例

1、addInterceptor.js文件

import whiteList from '@/utils/whiteList.js';
import store from '@/store';
const list = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'];
// 用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
list.forEach((item) => {
	uni.addInterceptor(item, {
		invoke(e) {
			// 获取要跳转的页面路径(url去掉"?"和"?"后的参数)
			const url = e.url.split('?')[0];
			// 判断当前用户是否登录
			let token = store.state.user.token;
			if (!token  && whiteList.includes(url)) {
				uni.navigateTo({
					url: '/pages/login/index',
				});
				return false;
			}
			return true;
		},
		fail(err) {
			// 失败回调拦截
			console.log(err);
		},
	});
});

2、whiteList.js文件

export default [
	'/pages/cart/index',
	//...其它要加入白名单的页面
];

3、最后在main.js文件引入addInterceptor.js文件就可以啦！

uniapp路由拦截器_uni.addinterceptor-CSDN博客

navigateTo

• 作用：用于在当前页面内跳转到应用内的某个页面，使用 wx.navigateTo 跳转时，会把当前页面压入栈中，用户可以通过返回按钮或navigateBack 回到上一个页面。
• 限制：不能跳转到 tabBar 页面。如果尝试跳转到 tabBar 页面，会没有反应或报错（具体取决于框架的实现）。
• 使用场景：通常用于从一个列表页面跳转到详情页面等非 tabBar 页面。

redirectTo

• 作用：关闭当前页面，跳转到应用内的某个页面。目标页面会成为当前页面栈的顶部页面。与 wx.navigateTo 不同的是，它不会把当前页面压入栈中，因此用户无法通过返回按钮回到上一个页面。
• 限制：同样不能跳转到 tabBar 页面。
• 使用场景：适用于需要完全替换当前页面而不希望用户能够返回的场景，如从列表跳转到详情页面并希望用户不能通过返回操作回到列表页面。

switchTab

• 作用：用于跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
• 限制：只能跳转到 tabBar 中定义的页面。
• 使用场景：适用于需要在 tabBar 页面之间切换的场景，如从首页切换到个人中心。
• switchTab打开一页面后，系统会为该页面建立一个新页面栈，采用返回方式走到该页面栈尽头后，再次点击返回会返回到上个页面栈的栈顶页面。
• 参数传递：由于 switchTab 会关闭其他页面，因此通过 URL 参数直接传递复杂数据并不合适。通常，通过全局状态管理（如 Vuex、Redux 或小程序的全局变量）来共享数据。

reLaunch

• 关闭所有页面，打开到应用内的某个页面。

• 跳转页面会刷新页面

• 需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，与redirectTo不同的是如果跳转的页面路径是 tabBar 页面则不能带参数

总结

• navigateTo 和 redirectTo 主要用于非 tabBar 页面之间的导航。
• switchTab 用于 tabBar 页面之间的切换。
• 

示例

uni.request({
    url: 'request/login', //仅为示例，并非真实接口地址。
    success: (res) => {
        console.log(res.data);
        // 打印： {code:1,...}
    }
});


uni.addInterceptor('request', {
  invoke(args) {
    // request 触发前拼接 url
    args.url = 'https://www.example.com/'+args.url
  },
  success(args) {
    // 请求成功后，修改code值为1
    args.data.code = 1
  },
  fail(err) {
    console.log('interceptor-fail',err)
  },
  complete(res) {
    console.log('interceptor-complete',res)
  }
})

uni.addInterceptor({
  returnValue(args) {
    // 只返回 data 字段
    return args.data
  }
})