后續(xù)請求都要帶上 token ?

genedna 發(fā)布于2019-08-23 11:47 / 983人閱讀

摘要：正經(jīng)寫文章平時開發(fā)里，先請求一個，然后后面的請求都要帶上這個來進(jìn)行認(rèn)證或者授權(quán)，是一個常見的需求那要怎么搞呢還是一個先后，控制異步流程的的問題，就是先拿到再進(jìn)行后面的請求就好了。

正經(jīng)寫文章

平時開發(fā)里，先請求一個 token ，然后后面的請求都要帶上這個 token 來進(jìn)行認(rèn)證或者授權(quán)，是一個常見的需求

那要怎么搞呢？還是一個先后，控制異步流程的的問題，就是先拿到 token 再進(jìn)行后面的請求就好了。相信 promise 大家已經(jīng)用得很泛濫了：

let tokenPromise = new Promise(...) // 拿到 token
tokenPromise.then()... // 拿到 token 后去拿數(shù)據(jù)1
tokenPromise.then()... // 拿到 token 后去拿數(shù)據(jù)2
tokenPromise.then()... // 拿到 token 后去拿數(shù)據(jù)3
...

如果向上面這樣組織那就完全沒問題了。但是實際上一般也不會這樣寫吧，好蠢。。。但是計算機(jī)就是用來幫我們做這種蠢的重復(fù)性工作的，我們稍微變通一下，原理還是一樣，只是代碼寫好看或者寫少一點(diǎn)就好了

假設(shè)我們都是用 XMLHttpRequest 來發(fā)起請求的話（誰能告訴我為什么XML是大寫Http卻不是。。。），我們可以在 xhr.send() 上做點(diǎn)手腳，把這個函數(shù)再包多一層，在里面叫它幫我們調(diào)用 tokenPromise.then()。先做好準(zhǔn)備工作：

首先我先用 easy-mock 模擬了兩個接口，一個返回 token，一個返回 message

https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/token
{
  "data": {
    "token": "a_mock_token"
  }
}

https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/message
{
  "data": {
    "message": "你好"
  }
}

然后用 jQuery 的 ajax 發(fā)請求（只要是用了 XMLHttpRequest 對象，都o(jì)k）：

接下來可以寫代碼了

// 先拿 token
var tokenPromise = new Promise((resovle, reject) => {
  // 清除緩存里的token
  localStorage.removeItem("token")
  $.ajax({
    type: "GET",
    url: "https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/token",
    success(res) {
      let token = res.data.token
      localStorage.setItem("token", token)
      resovle(token)
    },
    fail(err) {
      reject(err)
    }
  })
})

// 對 xhr.send 再包多一層
var originSend = XMLHttpRequest.prototype.send
XMLHttpRequest.prototype.send = function () {
  var args = arguments
  var self = this
  var fn = function () {
    var token = localStorage.getItem("token")
    // 假如把 token 放在請求頭里
    self.setRequestHeader("token", token)
    console.log("后續(xù)請求token: ", token)
    originSend.apply(self, args)
  }
  // tokenPromise resolved 了才會執(zhí)行后續(xù)的請求
  tokenPromise.then(fn)
}

// 后續(xù)其他請求， Network 看一下，請求已經(jīng)帶上 token 了
$.ajax({
  type: "GET",
  url: "https://easy-mock.com/mock/5b8fea568eee36669a6b5523/example/message",
  success(res) {
    console.log(res)
  },
  fail(err) {
    console.log(err)
  }
})

完整的代碼

當(dāng)然這只是一個大概的思路，你要用 axios 而不用 $.ajax ，或者是在小程序里對 wx.request() 包多一層而不是對 xhr.send() 包多一層都是類似的。希望我們能寫出更多野雞的寫法

自言自語

最近在認(rèn)真學(xué)習(xí) promise，覺得史上最易讀懂的 Promise/A+ 完全實現(xiàn) 這篇文章真的挺棒的，起碼能看懂一點(diǎn)了

然后有看到 fly （一個類似于axios的ajax庫）直接就把我們上述這個先請求 token 的功能寫在文檔里了，并且這個作者還寫了一個 Ajax-hook 來攔截 ajax 請求

所以就強(qiáng)行給博客拔拔草 :D