微信小程序请求拦截器

微信小程序并没有内置的请求拦截器功能。然而，你可以通过使用第三方库或自定义封装来实现请求拦截器的功能。一种常见的方法是使用封装的网络请求库，如axios或flyio，并在封装的网络请求函数中添加拦截器。拦截器可以用来修改请求的参数、添加请求头、处理错误等。另外，你也可以通过在页面的生命周期函数中进行相关操作来实现类似的效果。例如，在onLoad或onShow生命周期函数中判断用户的系统角色并进行相应的跳转或请求。

相关问题

微信小程序 请求拦截器

微信小程序的请求拦截器可以在使用 wx.request 发起请求之前，对请求进行拦截和处理。你可以通过以下步骤来实现请求拦截器：

1. 在 app.js 或者需要使用请求拦截器的页面中，定义一个全局变量 interceptorList 来存储拦截器列表：

App({
  // 全局变量
  globalData: {
    interceptorList: []
  }
})

2. 创建一个拦截器对象，包含 request 和 response 两个方法。这些方法会在请求发送之前和请求响应之后被调用：

// 拦截器对象
const interceptor = {
  // 请求拦截
  request: (config) => {
    // 对请求进行处理，比如添加 token 等
    return config;
  },
  // 响应拦截
  response: (response) => {
    // 对响应进行处理，比如处理错误码等
    return response;
  }
}

3. 在需要使用拦截器的页面中，将拦截器对象添加到全局变量 interceptorList 中：

// 获取全局变量
const app = getApp();

// 将拦截器添加到列表中
app.globalData.interceptorList.push(interceptor);

4. 最后，在发起请求的地方使用 wx.request，并在其中执行拦截器的 request 方法：

wx.request({
  // 其他配置项
  ...
  success: (response) => {
    // 获取全局变量
    const app = getApp();
    // 遍历拦截器列表，执行响应拦截方法
    app.globalData.interceptorList.forEach((interceptor) => {
      response = interceptor.response(response);
    })
    // 处理响应结果
    ...
  }
})

通过以上步骤，你可以实现微信小程序的请求拦截器，对请求和响应进行处理。你还可以根据具体需求，进一步完善拦截器的功能，比如错误统一处理、添加请求头等。

微信小程序页面拦截器

### 微信小程序页面拦截器方法

#### 使用场景与需求分析
在开发微信小程序过程中，有时需要对用户的访问行为进行控制，比如验证用户身份或权限。通过实现页面拦截机制，在特定条件下阻止用户进入某些页面或将用户重定向至其他页面。

#### 方案一：利用页面加载事件`onLoad()`和显示事件`onShow()`

可以在每个页面的 `onLoad()` 或者更推荐的是 `onShow()` 生命周期函数里加入逻辑判断来决定是否允许展示当前页面的内容。如果检测到未满足条件（如缺少必要的认证信息），则可以执行跳转操作[^1]：

Page({
  data: {},
  
  onLoad(options){
    // 此处可做一些初始化工作
  },

  onShow(){
    const app = getApp();
    
    if (!app.globalData.hasLogin){ // 假设全局变量中有登录状态标记
      wx.redirectTo({url:'/pages/login/index'}); // 如果没登录，则转向登录界面
    }
  }
})

这种方法简单易懂，适用于小型项目中的基本权限管理；但对于大型应用来说可能会显得冗余，因为几乎所有的页面都需要重复相同的代码片段来进行同样的检查。

#### 方案二：创建中间件/工具类统一处理

为了提高代码复用性和维护效率，建议构建一个通用的方法用于所有页面之前的一致性校验。可以通过编写公共模块的方式完成这一目标。下面是一个简单的例子说明如何使用自定义库文件来简化这个过程[^3]:

首先建立名为`authInterceptor.js`的新脚本文件:

// authInterceptor.js
const checkAuth = (toUrl)=>{
  let pages=getCurrentPages(); 
  let currentPage=pages[pages.length-1];
  let options={...currentPage.options};

  const app = getApp();

  if(!app.globalData.hasLogin && !['login'].includes(currentPage.route.split('/')[1])){
     wx.reLaunch({url:`/pages/login/index?redirect=${encodeURIComponent(toUrl)}`});
     return false;
  }

  return true;
}

module.exports={
   checkAuth
}

接着修改各个页面的入口配置如下所示:

import {checkAuth} from '../../common/authInterceptor'

Page({
  onLoad:function(option){
    var that=this;

    if(checkAuth(that.route)){
       // 继续原有业务逻辑...
    }
  },
  ...
})

此方案不仅减少了不必要的代码复制粘贴现象，还使得整个项目的结构更加清晰合理。同时也可以很容易地扩展更多的功能特性，例如记录日志、统计流量等。

#### 方案三：基于请求封装实现API级别的拦截

对于涉及网络通信的操作而言，除了上述两种方式外还可以考虑直接针对HTTP请求本身实施过滤措施。借助于第三方框架提供的能力或是自行设计一套轻量级解决方案都可以达到目的。以下是采用Promise风格编写的简易版axios-like API客户端实例[^4]:

先安装依赖项(如果有):

npm install axios --save-dev

随后编辑`request.js`:

// request.js
import axios from 'axios';

function createRequestInstance(config={}){
  const instance = axios.create({...config});

  // 请求前置处理器
  instance.interceptors.request.use(
    config => {
        const token=wx.getStorageSync('token');
        
        if(token){
            config.headers.Authorization=`Bearer ${token}`;
        }

        return config;
    },
    error=> Promise.reject(error)
  );

  // 响应后置处理器
  instance.interceptors.response.use(
    response=>{
        const status=response.status;

        switch(status){
          case 200:
              break;
          default :
             throw new Error(`Unexpected HTTP Status Code:${status}`);
        }

        return response.data;
    },
    error=>{
         if(error.response&&error.response.status===401){
           wx.navigateTo({url:'/pages/login/index'});
         }

         return Promise.reject(error);
    }
  )

  return instance;
}

export const fetchData=(endpoint,params={},method='GET',successCallback,failureCallback)=>
{
  try{
     const client=createRequestInstance();

     client({url:endpoint,data:params,method}).then(successCallback).catch(failureCallback);

  } catch(e){
     failureCallback(e.message||e.toString());
  }
};

最后调整调用位置的相关部分为:

import {fetchData} from './path/to/request';
...

fetchData('/api/someEndpoint',{paramName:'value'},'POST',
  res=>console.log(res),
  err=>console.error(err));

这种方式的优势在于它能够有效地分离关注点——即把鉴权相关的细节隐藏起来不让前端开发者操心太多的同时也保证了安全性。