天天看點

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理

下圖第1487行代碼,調用Angular HTTP library,往this.tokenEndpoint指向的API發送HTTP post請求,參數為使用者在login form裡輸入的使用者名和密碼:

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理

從HTTP Post傳回的response,包含了Access Token:

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理

auth-storage.service.ts,setItem調用this._token$的next方法,通知其監聽者:

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理

filter.js - predicate:

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理
SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理

将state從各種管道搜集而來,進行整合,最後存儲到storage中去:

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理

通知下一個subscriber:

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理

第73行的persistToStorage進行真正的storage持久化操作:

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理

需要持久化到storage裡的資料:

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理

這裡就是Chrome local storage裡能看到的資料:

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理
SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理

storage.setItem就是浏覽器操作local storage的原生實作:

SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理
SAP Spartacus 使用者登入成功後,Access Token 持久化到浏覽器 local storage 的執行原理