拦截token验证与ref Token (微信小程序)

2019-06-03

作为一个光荣的接盘侠, 需要在接手的项目中实现Token的能力, 正如前篇所说的,我们这web端网页端, app端都是公用一套接口. 就是token过期之后需要使用key去刷新token. 还好以前小程序的网络请求是全部封装挂载到App下面, 我只需要做一下兼容处理, 完全easy. 不过麻烦的应该是在状态管理, 小程序上面没有vue中备受好评的vuex, 心痛, 只能自己新建一个呢.

    以前这用户信息全是直接, 怎么说呢, 直接永久存在Storage里面. emmm, 一次登陆,永不下线. 现在我们需要做的就是重新封装网络请求部分和状态管理部分

新建 store/user.js

这里呢,我们通过封装一些函数, 来达到操作小程序中Storage的效果.

/**
 * 用户信息操作函数
 * @params 
 * @return 
*/ 

export default {
  getUserInfo: function(){
    return wx.getStorageSync('userInfo') || false;
  },
  getToken: function(){
    return wx.getStorageSync('token')||false;
  },
  getUserKey: function(){
    return wx.getStorageSync('user_key') || false;
  },
  setUserInfo: function (val) {
    return wx.setStorageSync('userInfo', val);
  },
  setToken: function (val) {
    return wx.setStorageSync('token', val);
  },
  setUserKey: function (val) {
    return wx.setStorageSync('user_key', val);
  }
}

新建store/index.js

这里我们通过调用前面定义好的函数, 来获取到小程序上次打开的状态信息, 并且将其挂载到app上实现全局状态.

/**
 * 状态管理方法
 * @params 
 * @return 
*/

import user from 'user.js'
const { getUserInfo, getToken, getUserKey, setUserInfo, setToken, setUserKey, getLocation } = user;

const store = {
  userinfo: getUserInfo(),
  token: getToken(),
  user_key: getUserKey(),
  setUserInfo: function (val) {
    setUserInfo(val)
    store.userinfo = val
  },
  setToken: function (val) {
    setToken(val)
    store.token = val
  },
  setUserKey: function (val) {
    setUserKey(val)
    store.user_key = val
  }
}
export default store

最后应该就是处理网络请求的 store/request.js

在这里我们暴漏出几个网络请求的函数, 来实现token的统一处理

/*
*  @description: 封装好统一请求, 并且处理 Token
*  @prame: {}
*  @return 
*/
import store from './index'
import config from '../config';
// 这里我导入的全局的配置文件

// console.log(store)

const ajax =  {
  /**
   * @ 统一请求, 所有请求都通过这个接口发出, 会自动补全地址token
   * @params
   * @return Pormise object
  */ 
  request: function (url, params, method, isToken){
    url = /http/.test(url) ?url: (config.url + url)
    wx.showLoading({
      title: '加载中' // 数据请求前loading
    })
    if (store.token && !isToken) typeof params !== 'undefined' ? params.apitoken = store.token : params = { apitoken:store.token}
    return new Promise((resolve, reject)=>{
      const axios = wx.request({
        url: url,
        data: params,
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          'H-Sys-Type': 'wechat',
          'H-App-Type': 'wechat',
          'H-Version': '',
        },
        method: method,
        dataType: 'json',
        success: function (res) {
          if (res.statusCode!== 200){
            if (res.statusCode === 401){
              console.warn('token过期, 正在重新获取 token')
              return ajax.refToken().then((res)=>{
                return ajax.request(url, params, method)
                // 为了兼容 Jquery 式请求, 必须这里做处理
                .then((res)=>{
                  resolve(res)
                }).catch((res)=>{
                  reject(res)
                })
              }).catch(()=>{
                ajax.handleLogOut()
                ajax.Modal({ content: '你的登陆状态已经过期,请重新登陆' }).then(() => {
                  //跳转到登陆页面
                  wx.reLaunch({ url: '/pages/index/index' })
                }).catch(() => {
                  // 跳转到主页
                })
              })
            } else if (res.statusCode === 402){
              ajax.handleLogOut()
              ajax.Modal({content:'你的登陆状态已经过期,请重新登陆'}).then(()=>{
                //跳转到登陆页面
                wx.reLaunch({url: '/pages/index/index'})
              })
            }
            //console.log(res)
          }else resolve(res.data)
        },
        fail: function (res) {
          console.error(res)
          reject(res)
          wx.showToast({
            title: '' + JSON.stringify(res),
            duration: 3000,
            icon: 'none'
          })
        },
        complete: function (res) {
          wx.hideLoading()
        },
      })
    })
  },
  /**
   * @ 不带token的新请求, 暂时没用到. 刷新token的接口不能带token
   * 
  */
  newRequest: function (url, params, method) {
    url = /http/.test(config.url) ? (config.url + url) : url
    return new Promise((resolve, reject) => {
      wx.request({
        url: url,
        data: params,
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          'H-Sys-Type': 'wechat',
          'H-App-Type': 'wechat',
          'H-Version': '',
        },
        method: method,
        dataType: 'json',
        success:res=>{ resolve(res.data) },
        fail: res=>{reject(res)}
      })
    })
  },
  /***
   * Jquery 式post请求数据
   * 
   * 
  */ 
  postReq: function(url, params, successCallback, errorCallback) {
    // console.log(this)
    ajax.request(url, params,"POST").then((res)=>{
      successCallback&&successCallback(res)
    }).catch((res)=>{
      errorCallback && errorCallback(res)
    })
  },
  /**
   * Jquery 式get请求数据
   * 
   * 
  */ 
  getReq: function(url, params, successCallback, errorCallback) {
    ajax.request(url, params, "GET").then((res) => {
      successCallback && successCallback(res)
    }).catch((res) => {
      errorCallback && errorCallback(res)
    })
  },
  post: function (url, params, isToken){
    return ajax.request(url, params, "POST", isToken)
  }, 
  get: function (url, params, isToken) {
    return ajax.request(url, params, "GET", isToken)
  },
  /**
   * 封装好的登陆接口
   * @params { tel, password }
   * @return Promise Object
  */ 
  handleLogin: function ({ tel, password }) {
    let params = {
      tel,
      password,
      // 这下面我们还可以自定义一些参数
      lng: store.location.longitude,
      lat: store.location.latitude,
      adcode: store.location.adcode, 
      type: 1,
      openid: wx.getStorageSync('user').openid,
      channel: 'miniapp'
    }
    return new Promise((resolve, reject)=>{
      ajax.post('/user/login', params).then((res)=>{
        if (res.code == 200){
          let {data:{auth}} = res
          // store.setUserInfo(data)
          store.setToken(auth.token)
          store.setUserKey(auth.user_key)
          resolve(res)
        } else reject(res)
      }).catch((error)=>{
        reject(error)
      })
    })
  },
  /**
   * 封装好的获取用户信息
   * @params { }
   * @return Promise Object
  */
  handleGetInfo: function(token){
    return new Promise((resolve, reject) => {
      ajax.get('/user/info').then((res) => {
        if (res.code == 200) {
          let { data } = res
          store.setUserInfo(data)
          resolve(res)
        } else reject(res)
      }).catch((error) => {
        reject(error)
      })
    })
  },
 /**
   * 封装好的刷新token接口
   * @params { }
   * @return Promise Object
  */
  refToken: () => {
    return new Promise((resolve, reject) => {
      ajax.post('/user/refreshtoken', { userkey: store.user_key }, true).then(res=>{
        if(res.code === 200){
          store.setToken(res.data.token)
          resolve()
        }else{
          reject()
        }
      })
    })
  },
  /**
   * 封装好的刷新退出登陆接口
   * @params { }
   * @return Promise Object
  */
  handleLogOut: ()=>{
    // code
    return new Promise((resolve,reject)=>{
      try{
        store.setToken('')
        store.setUserKey('')
        store.setUserInfo('')
        let user = wx.getStorageSync('user')
        wx.clearStorage()
        wx.setStorageSync('user', user)
        resolve()
      }catch(e){
        reject(e)
      }
    })
  },
  /**
   * 封装的微信弹窗
   * @params { title content }
   * @return Promise Object
  */
  Modal: ({title,content})=>{
    title = title||'提示'
    return new Promise((resolve,reject)=>{
      wx.showModal({
        title,
        content,
        success(res) {
          if (res.confirm) {
            resolve()
          } else if (res.cancel) {
            reject()
          }
        }
      })
    })
  }
}
module.exports = ajax

结束

在这里我们就是通过拦截所有的网络请求进行处理, 其实原理完全是一样的, 我们知道异步的回调时间不定的, 所以在接收到错误的时候我们还可以在发送两个请求, 将最后的结果返回出去, 中间完全可以让用户一直等待