顾名思义 接口拦截就是在页面中调用接口的时候 如果未登录，接口返回一个 固定状态码，小程序在响应拦截的地方做拦截处理。

通常授权方式有跳转到登陆页面 授权登陆（大部分都是这么做的）

 

也有部分小程序是直接在页面当中弹出授权登陆弹框来登录的

 

我们主要讲 跳转到登陆授权页的方式

首先你要有一个全局的拦截器 接口请求 响应拦截

在app.js 里面封装一个接口请求 函数（方法）：

  /**
   * post提交
   * 调用示例
   * app._post_form('xxxxxx',{},(res)=>{ })
   */
   _post_form(url, data, success, fail, complete, isShowNavBarLoading = true) {
    let _this = this;

    // 在当前页面显示导航条加载动画
    isShowNavBarLoading || true;
    if (isShowNavBarLoading == true) {
      wx.showNavigationBarLoading();
      wx.showLoading({
        mask: true,
        title: '加载中...',
      })
    }
    // 获取token
    let token = wx.getStorageSync('token');
    wx.request({
      url: 'xxxxxx', // 你的接口地址
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'token': token || ''
      },
      method: 'POST',
      data: data, // 你的请求参数
      success(res) {
        if (res.data.code === 4000) {
          // 登录失效
          wx.reLaunch({
            url: "/xxxxxx" // 你的登陆页面地址
          });
          return false
        } else if (res.data.code !== 200 && res.data.code !== 4000) {
            // 全局错误提示
            wx.showModal({
                title: '提示',
                content: res.data.message,
                showCancel: false,
                success(res) {
                  fail && fail(res);
                }
            });
          return false;
        }
        success && success(res.data); // 成功回调
      },
      fail(res) {
        wx.showModal({
            title: '提示',
            content: res.errMsg,
            showCancel: false,
            success(res) {
              fail && fail(res);
            }
        });
      },
      complete(res) {
        wx.hideNavigationBarLoading();
        wx.hideLoading();
        complete && complete(res);
      }
    });

  }

这时候在接口调用权限失败的时候 就可以跳转到你的登陆页面了。

在看下 登陆页面的授权登陆实现：

// 微信授权登录
setUserInfo: function(e) {
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.onLogin(res.userInfo)
      }
    })
  },
// 登录
onLogin(userInfo) {
    const _this = this
    wx.login({
        success: function (res) {
        if (res.code) {
            //发起网络请求
            app._post_form('/api/login', {
                code: res.code,
                avatarUrl: userInfo.avatarUrl,
                nickName: userInfo.nickName,
                gender: userInfo.gender
            }, (res)=>{
                if(res.code === 200){
                    // 登录成功且已经绑定
                    wx.setStorage({
                        key:"token",
                        data:res.data
                    })
                    wx.reLaunch({
                        url: '/pages/index/index',
                    })
                }
            })
        }
        },
        fail: function (res) {

        }
    })

},

这时候登陆成功以后会通过setStorage 把登陆成功的token 缓存到本地 这时候在跳转回 统一的页面。 这就完成了。

还有一个需求是 我到了登陆页面以后 登陆成功以后想要跳转回 我原来打开的页面这时候在登陆成功的回调函数内

                // 返回上一页
                let pages = getCurrentPages();
                if(pages.length > 1){
                  // 说明有路由栈返回上一页
                  wx.navigateBack({
                    delta: 1,
                  })
                } else {
                  wx.reLaunch({
                    url: '/pages/index/index',
                  })
                }

好了就到这里 有啥问题 欢迎留言沟通！！！