微信小程序-攜帶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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。