前後端分離

前後端分離前開發協作模式一般是這樣的：

前端寫好靜態的html頁面交付給後端開發。靜態頁面可以本地開發，也無需考慮業務邏輯只需要實現view即可。

後端使用模板引擎去套模板，同時內嵌一些後端提供的模板變數和一些邏輯操作。

然後前後端整合對接，遇到問題，前台返工，後台返工。

然後在整合，直至整合成功。

這種模式的問題

在前端除錯的時候要安裝完整的一套後端開發工具，要把後端程式完全啟動起來。遇到問題需要後端開發來幫忙除錯。如果發現前後端嚴重耦合，還要要求後端人員會一些html，js等前端語言。前端頁面裡還嵌入了很多後端的**。一旦後端換了一種語言開發，簡直就要重做。

這種增加了大量的溝通成本，除錯成本等，而且前後端的開發進度相互影響，從而大大降低了開發效率。

前後端分離並不只是開發模式，而是web應用的一種架構模式。在開發階段，前後端工程師約定好資料互動介面，實現並行開發和測試；在執行階段前後端分離模式需要對web應用進行分離部署，前後端之前使用http或者其他協議進行互動請求。

1. 客戶端和服務端採用restful api的互動方式進行互動

2. 前後端**庫分離

在傳統架構模式中，前後端**存放於同乙個**庫中，甚至是同一工程目錄下。頁面中還夾雜著後端**。前後端工程師進行開發時，都必須把整個專案匯入到開發工具中。

前後端**庫分離，前端**中有可以進行mock測試(通過構造虛擬測試對象以簡化測試環境的方法)的偽後端，能支援前端的獨立開發和測試。而後端**中除了功能實現外，還有著詳細的測試用例，以保證api的可用性，降低整合風險。

3. 並行開發

在開發期間前後端共同商定好資料介面的互動形式和資料格式。然後實現前後端的並行開發，其中前端工程師在開發完成之後可以獨自進行mock測試，而後端也可以使用postman等介面測試軟體進行介面自測，然後前後端一起進行功能聯調並校驗格式，最終進行自動化測試。

為優質產品打造精益團隊

通過將開發團隊前後端分離化，讓前後端工程師只需要專注於前端或後端的開發工作，是的前後端工程師實現自治，培養其獨特的技術特性，然後構建出乙個全棧式的精益開發團隊。

提公升開發效率

前後端分離以後，可以實現前後端**的解耦，只要前後端溝通約定好應用所需介面以及介面引數，便可以開始並行開發，無需等待對方的開發工作結束。與此同時，即使需求發生變更，只要介面與資料格式不變，後端開發人員就不需要修改**，只要前端進行變動即可。如此一來整個應用的開發效率必然會有質的提公升。

完美應對複雜多變的前端需求

如果開發團隊能完成前後端分離的轉型，打造優秀的前後端團隊，開發獨立化，讓開發人員做到專注專精，開發能力必然會有所提公升，能夠完美應對各種複雜多變的前端需求。

增強**可維護性

前後端分離後，應用的**不再是前後端混合，只有在執行期才會有呼叫依賴關係。應用**將會變得整潔清晰，不論是**閱讀還是**維護都會比以前輕鬆。

使用了前後端分離架構後，除了開發模式的變更，我們在開發的過程中還會遇到哪些問題呢？我們接著往下看。

如何進行使用者認證：

前端登入，後端根據使用者資訊生成乙個jsessionid，並儲存這個 jsessionid 和對應的使用者id到session中，接著把 jsessionid 傳給使用者，存入瀏覽器 cookie，之後瀏覽器請求帶上這個cookie，後端根據這個cookie值來查詢使用者，驗證是否過期。

http有乙個特性：無狀態的，就是前後兩個http事務它們並不知道對方的資訊。而為了維護會話資訊或使用者資訊，一般可用cookie和session技術快取資訊。

- cookie是儲存在客戶端的

- session是儲存在服務端的

但這樣做問題就很多，如果我們的頁面出現了 xss 漏洞，由於 cookie 可以被 j**ascript 讀取，xss 漏洞會導致使用者 token 洩露，而作為後端識別使用者的標識，cookie 的洩露意味著使用者資訊不再安全。儘管我們通過轉義輸出內容，使用 cdn 等可以盡量避免 xss 注入，但誰也不能保證在大型的專案中不會出現這個問題。

在設定 cookie 的時候，其實你還可以設定 httponly 以及 secure 項。設定 httponly 後 cookie 將不能被 js 讀取，瀏覽器會自動的把它加在請求的 header 當中，設定 secure 的話，cookie 就只允許通過 https 傳輸。secure 選項可以過濾掉一些使用 http 協議的 xss 注入，但並不能完全阻止。

httponly 選項使得 js 不能讀取到 cookie，那麼 xss 注入的問題也基本不用擔心了。但設定 httponly 就帶來了另乙個問題，就是很容易的被 xsrf，即跨站請求偽造。當你瀏覽器開著這個頁面的時候，另乙個頁面可以很容易的跨站請求這個頁面的內容。因為 cookie 預設被發了出去。

jwt（json web token）

jwt 是乙個開放標準(rfc 7519)，它定義了一種用於簡潔，自包含的用於通訊雙方之間以 json 物件的形式安全傳遞資訊的方法。該資訊可以被驗證和信任，因為它是數字簽名的。jwts可以使用秘密（使用hmac演算法）或公鑰/私鑰對使用rsa或ecdsa來簽名。

- 簡潔(compact)：可以通過url, post 引數或者在 http header 傳送，因為資料量小，傳輸速度快。

- 自包含(self-contained)：負載中包含了所有使用者所需要的資訊，避免了多次查詢資料庫。

jwt 組成

jwt由3個子字串組成，分別為header，payload以及signature，結合jwt的格式即：header.payload.signature。（claim是描述json的資訊的乙個json，將claim轉碼之後生成payload）。

header

header是由下面這個格式的json通過base64編碼（編碼不是加密，是可以通過反編碼的方式獲取到這個原來的json，所以jwt中存放的一般是不敏感的資訊）生成的字串，header中存放的內容是說明編碼物件是乙個jwt以及使用「sha-256」的演算法進行加密（加密用於生成signature）

- 頭部包含了兩部分，token 型別和採用的加密演算法

- base64是一種編碼，也就是說，它是可以被翻譯回原來的樣子來的。它並不是一種加密過程。

前後端分離

前後端分離

前後端分離

前後端分離

相關推薦