微信小程序-携带Token无感知登陆的网络请求方案

去年写了一个网络请求工具封装的文章
微信小程序~ 网络请求工具的封装
当时没有考虑登陆须要服务器token验证

token 是什么？

token 顾名思义就是令牌，也就是一种身份标志。用于和服务器肯定身份，它具备时效性，超过有效时间身份标志就会失效。

服务器为何须要token验证呢？

服务器有的API接口是须要相应的权限才能访问，好比：用户的收藏接口，确定须要用户登陆以后才能查看收藏列表，而想首页的文章列表、商品列表这类共用的数据，能够不须要登陆权限就能查看。

客户端和服务器链接是经过HTTP协议链接，而HTTP协议是无状态的，这种无状态意味着程序须要验证每一次请求，从而辨别客户端的身份。在这以前，程序能够经过Cookie和Session技术来辨别请求的。

关于Session和Cookie能够参考：【Cookie和Session详解】

而Session 和Cookie因为会保存用户的信息，所以是不太安全的，那么Token出现就是为了解决这个问题。
那么 token是怎么和服务器验证身份的呢？

token 实现身份验证原理

实现原理大体以下：

小程序里面如何实现？

1. 实现一个网络请求工具（可实现携带 token 和不携带 token 访问api）
2. 在 小程序的 app.js里面初次调用
3. 再根据不一样的api请求权限调用网络工具中的相关方法

【可查看后续博文，会介绍从服务器端到小程序端的实现】
下面只是部分代码的实现：需源码请联系

import {
  Base64
} from 'js-base64'

import {
  Token
} from '../models/token.js'


// console.log(Base64)

const tips = {
  1: '抱歉，出现了一个错误'
}
// # 解构
class HTTP {
  request({
    url,
    data = {},
    method = 'GET'
  }) {
    return new Promise((resolve, reject) => {
      this._request(url, resolve, reject, data, method)
    })
  }

  requestNoAuth({
    url,
    data = {},
    method = 'GET'
  }) {
    return new Promise((resolve, reject) => {
      this._requestNoAuth(url, resolve, reject, data, method)
    })
  }
  // 须要token的请求
  _request(url, resolve, reject, data = {}, method = 'GET', noRefetch = false) {
    wx.request({
      // url: api.baseUrl + url,
      url:  url,
      method: method,
      data: data,
      header: {
        'content-type': 'application/json',
        Authorization: this._encode()
      },
      success: (res) => {
        const code = res.statusCode.toString()
        if (code.startsWith('2')) {
          resolve(res.data)
        } else {
          if (code == '403') {
            if (!noRefetch) {
              this._refetch(
                url,
                resolve,
                reject,
                data,
                method
              )
            }
          } else {
            reject()
            const error_code = res.data.error_code
            this._show_error(error_code)
          }
        }
      },
      fail: (err) => {
        reject()
        this._show_error(1)
      }
    })

  }

  // 不须要token的请求
  _requestNoAuth(url, resolve, reject, data = {}, method = 'GET', noRefetch = false) {
    wx.request({
      url: url,
      method: method,
      data: data,
      success: (res) => {
        const code = res.statusCode.toString()
        if (code.startsWith('2')) {
          resolve(res.data)
        } else {
            reject()
            const error_code = res.data.error_code
            this._show_error(error_code)
        }
      },
      fail: (err) => {
        reject()
        this._show_error(1)
      }
    })

  }

  _show_error(error_code) {
    if (!error_code) {
      error_code = 1
    }
    const tip = tips[error_code]
    wx.showToast({
      title: tip ? tip : tips[1],
      icon: 'none',
      duration: 2000
    })
  }

  _refetch(...param) {
    var token = new Token();
    token.getTokenFromServer((token) => {
      this._request(...param, true);
    });
  }

  _encode() {
    const token = wx.getStorageSync('loginToken')
    const base64 = Base64.encode(token + ':')
    return 'Basic ' + base64
  }


}

export {
  HTTP
}

【未完，待续。】

本文同步分享在 博客“_龙衣”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。