2016年10月15日 星期六

[Angular2] 在每個Request加入自訂的Header資訊

前言

開發架構都偏向後端是個REST API,而要做到身分驗證必須要走OAuth協定,而我們系統採用的是 Bearer Token ,Client 像 Server 端取得Access Token後,只要在Header加入Key 為 Authorization的格式,就能判斷該Request的登入身分,而這個 Header的Value 會長這樣

Bearer XXXXXXXX
而在Angular2如何在每次像API發送Request的時候怎麼夾帶這個資訊呢?
範本安裝請參考 : http://kyleap.blogspot.tw/2016/10/angular2.html
== 前端版號很重要 ==

angular-cli: 1.0.0-beta.17
node: 6.6.0
angular : 2.0.0

== 前端版號很重要 ==

1. 於app目錄加入app.request.ts,並加入以下程式

 

螢幕快照 2016-10-15 下午5.14.07

自訂的AppRequestOptions繼承(extends)BaseRequestOptions Class,並執行底層Class的建構(super()),而如有登入過通常我會將OAuth所回傳的Token資訊存在localStorage,故判斷如果有資料的話則在Headers加入Authorization

2. 於app.module.ts 注入app.reqequest

螢幕快照 2016-10-15 下午5.33.00

螢幕快照 2016-10-15 下午5.37.07

http模組加入RequestOptions及匯入剛剛的app.request.ts及於App Module注入即可

接著打開瀏覽器開發工具,就可以看到http發送Request後就可以看到Header多了Authorization

螢幕快照 2016-10-15 下午5.44.54

後記

這個方法可以很容易的帶入我們要的Header資訊,而還有另一個方式是自訂一個Http Provider,有機會再寫另一篇分享

本次範例程式 : https://github.com/kyleap/angular-learn-sample

--

References

https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html

 

 

 
 
 

沒有留言:

張貼留言