收藏
回答

小程序里面统一的登录拦截怎么做好一点?

目前做的一个内部使用的小程序,需要先登录后才能使用。

登录逻辑大概是:进入小程序先判断当前是否已登录,如果未登录,先调用wx.login尝试自动登录,如果未存在用户,就跳转登录页面。

由于小程序里面请求全部都是异步的,这个登录判断现在做得很难受。

  1. 每个页面都写登录状态判断
  2. 目前尝试在request请求之前统一处理,但是如果有2个接口同时请求的话就会同时自动登录2次。这个很不爽。

请教有没有其他方法?能够全局统一拦截掉

function _do(api, method, data{
  let header = HEADER
  header[TOKENNAME] = getToken()
  
  return new Promise((reslove, reject) => {
    wx.request({
      url: HTTP_REQUEST_URL + api,
      method: method || 'GET',
      header: header,
      data: data || {},
      success: (res) => {
        
        if (res.data.code == 1) {
          reslove(res.data, res);
        } else if (res.data.code == 403) {
          wx.showToast({
            icon: "none",
            title: '你没有访问此接口的权限!',
          })
          reject('你没有访问此接口的权限!')
        } else if ([401].indexOf(res.data.code) !== -1) {
          logout()
          wx.showToast({
            icon: "none",
            title: '登录状态已失效,请重新登录!',
          })
          setTimeout(() => {
            wx.navigateTo({
              url: '/pages/login/index',
            })
          }, 1500)
        } else {
          wx.showToast({
            icon: "none",
            title: res.data.msg || '请求失败!',
          })
          reject(res.data);
        }
      },
      fail: (msg) => {
        reject(msg);
      }
    })
  })
}

function request1(api, method, data, {noAuth = false, noVerify = false})
{
  if (!isLogin() && !PUBLIC_API_LIST.includes(api)) {
    
    return new Promise((reslove, reject) => {
      /**
       * 尝试自动登录
       * 如果自动登录没成功就跳转登录页面
       */
      wx.login({
        success: res => {
          wx.request({
            url: HTTP_REQUEST_URL + '/api/user/autoLogin',
            method: 'POST',
            header: HEADER,
            data: { code: res.code },
            success: (response) => {
              if (response.data.code == 1) {
                let token = response.data.data.token
                if (token) {
                  setToken(token)
                  
                  _do(api, method, data).then(res => {
                    reslove(res)
                  }).catch(err => {
                    reject(err)
                  })
                } else {
                  wx.navigateTo({
                    url: '/pages/login/index',
                  })
                }
              } else {
                wx.navigateTo({
                  url: '/pages/login/index',
                })
              }
            },
            fail: (msg) => {
              wx.navigateTo({
                url: '/pages/login/index',
              })
            }
          })
        },
        fail: () => {
          wx.navigateTo({
            url: '/pages/login/index',
          })
        }
      })
    })
  } else {
    return _do(api, method, data)
  }
}
回答关注问题邀请回答
收藏

2 个回答

  • TANGYC_
    TANGYC_
    2023-12-18

    看下这篇文章: https://blog.csdn.net/weixin_45463061/article/details/134619427

    2023-12-18
    有用
    回复
  • Alias
    Alias
    2022-12-21

    请求全部都是异步的」把这个改掉就可以,我们也是这样 很稳定:

    每个页面的请求可以 await 一个个来,在request层面拦截判断状态就行。

    比如页面有 5 个请求:a、b、c、d、e

    原先:

    a(); //在request会拦截判断登录状态
    b(); //5个同时发出去,他们在发出去时候都属于未登录
    c();
    d();
    e();
    

    改成:

    await a(); //在request会拦截判断登录状态
    b(); //b、c、d、e 同时请求时,a已经处理好登录状态。
    c();
    d();
    e();
    
    2022-12-21
    有用
    回复 1
    • chao
      chao
      2022-12-21
      就是abcd可能不是在同一个生命周期里面,我发现这个问题是因为onLoad和onShow里面各有一个请求。
      2022-12-21
      回复
登录 后发表内容