后續請求都要帶上 token ?

genedna 發布于2019-08-23 11:47 / 984人閱讀

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

正經寫文章

平時開發里，先請求一個 token ，然后后面的請求都要帶上這個 token 來進行認證或者授權，是一個常見的需求

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

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

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

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

首先我先用 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 發請求（只要是用了 XMLHttpRequest 對象，都ok）：

接下來可以寫代碼了

// 先拿 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("后續請求token: ", token)
    originSend.apply(self, args)
  }
  // tokenPromise resolved 了才會執行后續的請求
  tokenPromise.then(fn)
}

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

完整的代碼

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

自言自語

最近在認真學習 promise，覺得史上最易讀懂的 Promise/A+ 完全實現這篇文章真的挺棒的，起碼能看懂一點了

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

所以就強行給博客拔拔草 :D

GPU云服務器云服務器沒有token的請求怎么防止ddos 服務器后續擴容阿里云服務器到期后續費阿里云服務器過期后續費

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97458.html

App架構設計經驗談:接口的設計

摘要：安全機制的設計現在，大部分的接口都采用架構，最重要的一個設計原則就是，客戶端與服務器的交互在請求之間是無狀態的，也就是說，當涉及到用戶狀態時，每次請求都要帶上身份驗證信息。 App與服務器的通信接口如何設計得好，需要考慮的地方挺多的，在此根據我的一些經驗做一些總結分享，旨在拋磚引玉。安全機制的設計現在，大部分App的接口都采用RESTful架構，RESTFul最重要的一個設計原則就...

zombieda 2019-06-24 17:49 評論0 收藏0
jwt前后端整合方案

摘要：到這里，基于的前后端分離實現方案就搞定啦四關于的一些思考實際上，在使用的過程中有一個比較致命的缺點，就是一旦簽發了，在到期之前就會始終有效，除非服務器部署額外的邏輯。結語以上是關于基于的前后端分離實現方案的總結和思考。一、jwt是什么 JWT全稱， JSON Web Token，是一個以JSON為基準的標準規范。舉例：服務器認證以后，生成一個 JSON 對象，發回給用戶，就像下...

nevermind 2019-08-23 17:11 評論0 收藏0
Vue路由之JWT身份認證

摘要：路由之身份認證一身份認證簡介是目前最流行的跨域身份驗證解決方案，相較于機制，服務器就不需要保存任何數據了，也就是說，服務器變成無狀態了，從而比較容易實現擴展。 Vue路由之JWT身份認證一、JWT身份認證簡介 JSON Web Token（JWT）是目前最流行的跨域身份驗證解決方案，相較于session機制，服務器就不需要保存任何 session 數據了，也就是說，服務器變成無狀態...

he_xd 2019-08-26 11:00 評論0 收藏0
【Geek議題】合理的VueSPA架構討論（上）

摘要：下面也是以模塊的模塊集為例，可以發現和路由有一些不同就是這里為了防止模塊跟全局耦合，運用函數式編程思想類似于依賴注入，將全局的實例作為函數參數傳入，再返回出一個包含的對象，這個導出的對象將會被以模塊名命名，合并到全局的集中。前言 web前端發展到現代，已經不再是嚴格意義上的后端MVC的V層，它越來越向類似客戶端開發的方向發展，已獨立擁有了自己的MVVM設計模型。前后端的分離也使前端人...

worldligang 2019-08-22 15:53 評論0 收藏0
【Geek議題】合理的VueSPA架構討論（上）

摘要：下面也是以模塊的模塊集為例，可以發現和路由有一些不同就是這里為了防止模塊跟全局耦合，運用函數式編程思想類似于依賴注入，將全局的實例作為函數參數傳入，再返回出一個包含的對象，這個導出的對象將會被以模塊名命名，合并到全局的集中。前言 web前端發展到現代，已經不再是嚴格意義上的后端MVC的V層，它越來越向類似客戶端開發的方向發展，已獨立擁有了自己的MVVM設計模型。前后端的分離也使前端人...

pepperwang 2019-08-02 10:03 評論0 收藏0