uni.addInterceptor
时间: 2023-12-08 10:27:54 浏览: 70
uni.addInterceptor 是一个用于拦截 uni 的 API 的方法。它主要用于给 API 添加全局的属性或者全局处理事件,比如登录拦截。通过调用 uni.addInterceptor 方法,可以在请求发送前或者响应返回后对请求进行拦截和处理。
具体地说,在 uniapp 中,可以通过 uni.addInterceptor 进行路由拦截。在小程序中,可以实现对 uniapp 提供的路由跳转方式的拦截,包括自带的返回按钮和底部 tabbar 的切换。虽然无法拦截这些跳转,但可以监听到跳转前的页面和跳转后的页面。而在 H5 上,支持对所有路由进行拦截。
使用 uni.addInterceptor 方法可以实现在路由跳转前和跳转后进行一些操作,比如添加全局的权限验证、页面切换动画等。通过拦截器,可以在不修改每个页面代码的情况下实现全局的处理逻辑。
相关问题
uniapp中的uni.request跟uni.addInterceptor怎么使用
在Uni-app中,你可以使用`uni.request`方法发送网络请求,并使用`uni.addInterceptor`方法添加拦截器来对请求进行拦截和处理。下面是一个示例:
1. 在`main.js`文件中引入`uni.request`方法和`uni.addInterceptor`方法:
```javascript
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
Vue.prototype.$http = uni.request
Vue.prototype.$addInterceptor = uni.addInterceptor
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
```
2. 在需要使用的页面中,使用`uni.addInterceptor`方法添加拦截器:
```javascript
export default {
methods: {
requestInterceptor() {
// 添加请求拦截器
this.$addInterceptor('request', (config) => {
// 在发送请求之前可以对请求参数进行处理
console.log('请求拦截器 - 请求参数:', config)
return config
})
// 添加响应拦截器
this.$addInterceptor('response', (response) => {
// 在接收到响应数据之后可以对数据进行处理
console.log('响应拦截器 - 响应数据:', response)
return response
})
},
removeInterceptor() {
// 移除拦截器
this.$addInterceptor('request', undefined)
this.$addInterceptor('response', undefined)
}
},
mounted() {
this.requestInterceptor()
// 发起请求
this.$http({
url: 'https://api.example.com',
method: 'GET',
data: {
// 请求参数
},
success: (res) => {
// 请求成功回调
console.log('请求成功:', res)
},
fail: (err) => {
// 请求失败回调
console.log('请求失败:', err)
}
})
// 移除拦截器
this.removeInterceptor()
}
}
```
在示例中,通过`this.$addInterceptor`方法添加请求拦截器和响应拦截器,可以在拦截器内部对请求和响应进行处理。你可以根据自己的需求在拦截器中对请求和响应进行操作。注意,在不需要拦截器的时候,可以使用`this.$addInterceptor`方法将拦截器设置为`undefined`来移除拦截器。
用uni.addInterceptor在请求头上添加token
使用uni.addInterceptor在请求头上添加token的代码中,首先定义了一个needLogin数组,用来存放需要验证登录的页面路径。然后通过遍历list数组,分别为uni.navigateTo、uni.redirectTo、uni.reLaunch和uni.switchTab这四个路由方法添加拦截器。在拦截器的invoke方法中,首先获取用户的token,然后获取当前页面的路径去掉参数后的url。接着判断要打开的页面是否在needLogin数组中,同时判断token是否为空。如果需要验证登录且token为空,则会弹出提示信息并跳转到登录页面,否则返回true表示可以继续执行。最后,在fail方法中处理失败的回调。这样通过uni.addInterceptor可以在请求头上添加token进行拦截操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue在请求头中添加token信息的image自定义标签](https://download.csdn.net/download/YinJson/88042075)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [uniapp全局拦截之uni.addInterceptor](https://blog.csdn.net/keaicll/article/details/129670953)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)