成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

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

genedna / 1029人閱讀

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

正經(jīng)寫(xiě)文章

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

那要怎么搞呢？還是一個(gè)先后，控制異步流程的的問(wèn)題，就是先拿到 token 再進(jìn)行后面的請(qǐng)求就好了。相信 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
...

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

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

首先我先用 easy-mock 模擬了兩個(gè)接口，一個(gè)返回 token，一個(gè)返回 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ā)請(qǐng)求（只要是用了 XMLHttpRequest 對(duì)象，都o(jì)k）：



接下來(lái)可以寫(xiě)代碼了


// 先拿 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)
    }
  })
})

// 對(duì) 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 放在請(qǐng)求頭里
    self.setRequestHeader("token", token)
    console.log("后續(xù)請(qǐng)求token: ", token)
    originSend.apply(self, args)
  }
  // tokenPromise resolved 了才會(huì)執(zhí)行后續(xù)的請(qǐng)求
  tokenPromise.then(fn)
}

// 后續(xù)其他請(qǐng)求， Network 看一下，請(qǐng)求已經(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)然這只是一個(gè)大概的思路，你要用 axios 而不用 $.ajax ，或者是在小程序里對(duì) wx.request() 包多一層而不是對(duì) xhr.send() 包多一層都是類(lèi)似的。希望我們能寫(xiě)出更多野雞的寫(xiě)法

自言自語(yǔ)

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


然后有看到 fly （一個(gè)類(lèi)似于axios的ajax庫(kù)）直接就把我們上述這個(gè)先請(qǐng)求 token 的功能寫(xiě)在文檔里了，并且這個(gè)作者還寫(xiě)了一個(gè) Ajax-hook 來(lái)攔截 ajax 請(qǐng)求


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

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97458.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    App架構(gòu)設(shè)計(jì)經(jīng)驗(yàn)談:接口的設(shè)計(jì)
    
                                                     
    摘要：安全機(jī)制的設(shè)計(jì)現(xiàn)在，大部分的接口都采用架構(gòu)，最重要的一個(gè)設(shè)計(jì)原則就是，客戶(hù)端與服務(wù)器的交互在請(qǐng)求之間是無(wú)狀態(tài)的，也就是說(shuō)，當(dāng)涉及到用戶(hù)狀態(tài)時(shí)，每次請(qǐng)求都要帶上身份驗(yàn)證信息。

App與服務(wù)器的通信接口如何設(shè)計(jì)得好，需要考慮的地方挺多的，在此根據(jù)我的一些經(jīng)驗(yàn)做一些總結(jié)分享，旨在拋磚引玉。
安全機(jī)制的設(shè)計(jì)
現(xiàn)在，大部分App的接口都采用RESTful架構(gòu)，RESTFul最重要的一個(gè)設(shè)計(jì)原則就...
    
                                                   
                          
    
                                
    
                                    zombieda
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    jwt前后端整合方案
    
                                                     
    摘要：到這里，基于的前后端分離實(shí)現(xiàn)方案就搞定啦四關(guān)于的一些思考實(shí)際上，在使用的過(guò)程中有一個(gè)比較致命的缺點(diǎn)，就是一旦簽發(fā)了，在到期之前就會(huì)始終有效，除非服務(wù)器部署額外的邏輯。結(jié)語(yǔ)以上是關(guān)于基于的前后端分離實(shí)現(xiàn)方案的總結(jié)和思考。

一、jwt是什么
JWT全稱(chēng)， JSON Web Token，是一個(gè)以JSON為基準(zhǔn)的標(biāo)準(zhǔn)規(guī)范。  
舉例：服務(wù)器認(rèn)證以后，生成一個(gè) JSON 對(duì)象，發(fā)回給用戶(hù)，就像下...
    
                                                   
                          
    
                                
    
                                    nevermind
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    Vue路由之JWT身份認(rèn)證
    
                                                     
    摘要：路由之身份認(rèn)證一身份認(rèn)證簡(jiǎn)介是目前最流行的跨域身份驗(yàn)證解決方案，相較于機(jī)制，服務(wù)器就不需要保存任何數(shù)據(jù)了，也就是說(shuō)，服務(wù)器變成無(wú)狀態(tài)了，從而比較容易實(shí)現(xiàn)擴(kuò)展。

Vue路由之JWT身份認(rèn)證
一、JWT身份認(rèn)證簡(jiǎn)介

JSON Web Token（JWT）是目前最流行的跨域身份驗(yàn)證解決方案，相較于session機(jī)制，服務(wù)器就不需要保存任何 session 數(shù)據(jù)了，也就是說(shuō)，服務(wù)器變成無(wú)狀態(tài)...
    
                                                   
                          
    
                                
    
                                    he_xd
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    【Geek議題】合理的VueSPA架構(gòu)討論（上）
    
                                                     
    摘要：下面也是以模塊的模塊集為例，可以發(fā)現(xiàn)和路由有一些不同就是這里為了防止模塊跟全局耦合，運(yùn)用函數(shù)式編程思想類(lèi)似于依賴(lài)注入，將全局的實(shí)例作為函數(shù)參數(shù)傳入，再返回出一個(gè)包含的對(duì)象，這個(gè)導(dǎo)出的對(duì)象將會(huì)被以模塊名命名，合并到全局的集中。

前言
web前端發(fā)展到現(xiàn)代，已經(jīng)不再是嚴(yán)格意義上的后端MVC的V層，它越來(lái)越向類(lèi)似客戶(hù)端開(kāi)發(fā)的方向發(fā)展，已獨(dú)立擁有了自己的MVVM設(shè)計(jì)模型。前后端的分離也使前端人...
    
                                                   
                          
    
                                
    
                                    worldligang
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    【Geek議題】合理的VueSPA架構(gòu)討論（上）
    
                                                     
    摘要：下面也是以模塊的模塊集為例，可以發(fā)現(xiàn)和路由有一些不同就是這里為了防止模塊跟全局耦合，運(yùn)用函數(shù)式編程思想類(lèi)似于依賴(lài)注入，將全局的實(shí)例作為函數(shù)參數(shù)傳入，再返回出一個(gè)包含的對(duì)象，這個(gè)導(dǎo)出的對(duì)象將會(huì)被以模塊名命名，合并到全局的集中。

前言
web前端發(fā)展到現(xiàn)代，已經(jīng)不再是嚴(yán)格意義上的后端MVC的V層，它越來(lái)越向類(lèi)似客戶(hù)端開(kāi)發(fā)的方向發(fā)展，已獨(dú)立擁有了自己的MVVM設(shè)計(jì)模型。前后端的分離也使前端人...
    
                                                   
                          
    
                                
    
                                    pepperwang
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<