国产精品久久久久久麻豆一区|亚洲一区二区三区无码久久樱花|亚洲人成无码网站久久91|国产91精品一区二区亚洲

    <track id="7jmaw"><span id="7jmaw"></span></track>

    <bdo id="7jmaw"></bdo>

    
    
    <track id="7jmaw"></track>
        <menuitem id="7jmaw"><dfn id="7jmaw"></dfn></menuitem>
        <track id="7jmaw"><span id="7jmaw"></span></track>
      1. 
        

        1. <track id="7jmaw"><div id="7jmaw"></div></track>
          138-4942-2648

          網站建設 APP開發 小程序

          KNOWLEDGE/知識

          分享你我感悟

          您當前位置> 首頁 > 知識 > 什么是前后端分離

          什么是前后端分離

          發表時間:2023-01-14 11:51:22

          文章作者:新翔軟件

          瀏覽次數: 503

          本文目錄

          回到目錄

          一 傳統的開發模式

          前后端分離前我們的開發協作模式一般是這樣的:

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

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

          然后前后端集成對接,遇到問題,前臺返工,后臺返工。

          然后在集成,直至集成成功。

          這種模式的問題

          在前端調試的時候要安裝完整的一套后端開發工具,要把后端程序完全啟動起來。遇到問題需要后端開發來幫忙調試。我們發現前后端嚴重耦合,還要要求后端人員會一些HTML,JS等前端語言。前端頁面里還嵌入了很多后端的代碼。一旦后端換了一種語言開發,簡直就要重做。

          像這種增加了大量的溝通成本,調試成本等,而且前后端的開發進度相互影響,從而大大降低了開發效率。

          回到目錄

          二 前后端分離的開發模式

          前后端分離并不只是開發模式,而是web應用的一種架構模式。在開發階段,前后端工程師約定好數據交互接口,實現并行開發和測試;在運行階段前后端分離模式需要對web應用進行分離部署,前后端之前使用HTTP或者其他協議進行交互請求。

          1. 客戶端和服務端采用RESTFul API的交互方式進行交互

          2. 前后端代碼庫分離

          在傳統架構模式中,前后端代碼存放于同一個代碼庫中,甚至是同一工程目錄下。頁面中還夾雜著后端代碼。前后端工程師進行開發時,都必須把整個項目導入到開發工具中。

          前后端代碼庫分離,前端代碼中有可以進行Mock測試(通過構造虛擬測試對 象以簡化測試環境的方法)的偽后端,能支持前端的獨立開發和測試。而后端代碼中除了功能實現外,還有著詳細的測試用例,以保證API的可用性,降低集成風險。

          3. 并行開發

          在開發期間前后端共同商定好數據接口的交互形式和數據格式。然后實現前后端的并行開發,其中前端工程師在開發完成之后可以獨自進行mock測試,而后端也可以使用Postman等接口測試軟件進行接口自測,然后前后端一起進行功能聯調并校驗格式,最終進行自動化測試。

          分離后,開發模式是這樣的

          回到目錄

          三 前后分離的優點

          為優質產品打造精益團隊

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

          提升開發效率

          前后端分離以后,可以實現前后端代碼的解耦,只要前后端溝通約定好應用所需接口以及接口參數,便可以開始并行開發,無需等待對方的開發工作結束。與此同時,即使需求發生變更,只要接口與數據格式不變,后端開發人員就不需要修改代碼,只要前端進行變動即可。如此一來整個應用的開發效率必然會有質的提升。

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

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

          增強代碼可維護性

          前后端分離后,應用的代碼不再是前后端混合,只有在運行期才會有調用依賴關系。應用代碼將會變得整潔清晰,不論是代碼閱讀還是代碼維護都會比以前輕松。

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

          回到目錄

          四 JWT實現用戶認證

          我們先來看看傳統開發,我們是如何進行用戶認證的

          前端登錄,后端根據用戶信息生成一個jsessionid,并保存這個 jsessionid 和對應的用戶id到Session中,接著把 jsessionid 傳給用戶,存入瀏覽器 cookie,之后瀏覽器請求帶上這個cookie,后端根據這個cookie值來查詢用戶,驗證是否過期。

          HTTP有一個特性:無狀態的,就是前后兩個HTTP事務它們并不知道對方的信息。而為了維護會話信息或用戶信息,一般可用Cookie和Session技術緩存信息。

          - Cookie是存儲在客戶端的

          - Session是存儲在服務端的

          但這樣做問題就很多,如果我們的頁面出現了 XSS 漏洞,由于 cookie 可以被 JavaScript 讀取,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)

          {
          "typ":"JWT",
          "alg":"HS256"
          }

          - 頭部包含了兩部分,token 類型和采用的加密算法

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

          Payload

          Payload是通過Claim進行Base64轉碼之后生成的一串字符串,Claim是一個Json,Claim中存放的內容是JWT自身的標準屬性,所有的標準屬性都是可選的,可以自行添加,比如:JWT的簽發者、JWT的接收者、JWT的持續時間等;同時Claim中也可以存放一些自定義的屬性,這個自定義的屬性就是在用戶認證中用于標明用戶身份的一個屬性,比如用戶存放在數據庫中的id,為了安全起見,一般不會將用戶名及密碼這類敏感的信息存放在Claim中。將Claim通過Base64轉碼之后生成的一串字符串稱作Payload。

          復制代碼

          復制代碼

          {
          "iss":"Issuer —— 用于說明該JWT是由誰簽發的",
          "sub":"Subject —— 用于說明該JWT面向的對象",
          "aud":"Audience —— 用于說明該JWT發送給的用戶",
          "exp":"Expiration Time —— 數字類型,說明該JWT過期的時間",
          "nbf":"Not Before —— 數字類型,說明在該時間之前JWT不能被接受與處理",
          "iat":"Issued At —— 數字類型,說明該JWT何時被簽發",
          "jti":"JWT ID —— 說明標明JWT的唯一ID",
          "user-definde1":"自定義屬性舉例",
          "user-definde2":"自定義屬性舉例"
          }

          復制代碼

          復制代碼

          Signature

          Signature是由Header和Payload組合而成,將Header和Claim這兩個Json分別使用Base64方式進行編碼,生成字符串Header和Payload,然后將Header和Payload以Header.Payload的格式組合在一起形成一個字符串,然后使用上面定義好的加密算法和一個密匙(這個密匙存放在服務器上,用于進行驗證)對這個字符串進行加密,形成一個新的字符串,這個字符串就是Signature。

          簽名的目的:最后一步簽名的過程,實際上是對頭部以及負載內容進行簽名,防止內容被竄改。如果有人對頭部以及負載的內容解碼之后進行修改,再進行編碼,最后加上之前的簽名組合形成新的JWT的話,那么服務器端會判斷出新的頭部和負載形成的簽名和JWT附帶上的簽名是不一樣的。如果要對新的頭部和負載進行簽名,在不知道服務器加密時用的密鑰的話,得出來的簽名也是不一樣的。

          三個部分通過.連接在一起就是我們的 JWT 了:

          eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU3ZmVmMTY0ZTU0YWY2NGZmYzUzZGJkNSIsInhzcmYiOiI0ZWE1YzUwOGE2NTY2ZTc2MjQwNTQzZjhmZWIwNmZkNDU3Nzc3YmUzOTU0OWM0MDE2NDM2YWZkYTY1ZDIzMzBlIiwiaWF0IjoxNDc2NDI3OTMzfQ.PA3QjeyZSUh7H0GfE0vJaKW4LjKJuC3dVLQiY4hii8s

          JWT認證

          服務器在生成一個JWT之后會將這個token發送到客戶端機器,在客戶端再次訪問受到JWT保護的資源URL鏈接的時候,服務器會獲取到這個token信息,首先將Header進行反編碼獲取到加密的算法,在通過存放在服務器上的密匙對Header.Payload 這個字符串進行加密,比對token中的Signature和實際加密出來的結果是否一致,如果一致那么說明該token是合法有效的,認證成功,否則認證失敗。

          JWT使用總結

          1. 首先,前端通過Web表單將自己的用戶名和密碼發送到后端的接口。這一過程一般是一個HTTP POST請求。建議的方式是通過SSL加密的傳輸(https協議),從而避免敏感信息被嗅探。

          2. 后端核對用戶名和密碼成功后,將用戶的id等其他信息作為JWT Payload(負載),將其與頭部分別進行Base64編碼拼接后簽名,形成一個JWT。形成的JWT就是一個形同lll.zzz.xxx的字符串。

          3. 后端將JWT字符串作為登錄成功的返回結果返回給前端。前端可以將返回的結果保存在Cookie或localStorage或sessionStorage上,退出登錄時前端刪除保存的JWT即可。

          4. 前端在每次請求時將JWT放入HTTP Header中的Authorization位。(解決XSS和XSRF問題)

          5. 后端檢查是否存在,如存在驗證JWT的有效性。例如,檢查簽名是否正確;檢查Token是否過期;檢查Token的接收方是否是自己(可選)。

          6. 驗證通過后后端使用JWT中包含的用戶信息進行其他邏輯操作,返回相應結果。

          JWT和Session方式存儲id的差異

          Session方式存儲用戶id的最大弊病在于Session是存儲在服務器端的,所以需要占用大量服務器內存,對于較大型應用而言可能還要保存許多的狀態。一般而言,大型應用還需要借助一些KV數據庫和一系列緩存機制來實現Session的存儲。

          而JWT方式將用戶狀態分散到了客戶端中,可以明顯減輕服務端的內存壓力。除了用戶id之外,還可以存儲其他的和用戶相關的信息,例如該用戶是否是管理員、用戶所在的分組等。雖說JWT方式讓服務器有一些計算壓力(例如加密、編碼和解碼),但是這些壓力相比磁盤存儲而言可能就不算什么了。

          單點登錄

          Session方式來存儲用戶id,一開始用戶的Session只會存儲在一臺服務器上。對于有多個子域名的站點,每個子域名至少會對應一臺不同的服務器,例如:

          www.taobao.com,nv.taobao.com,nz.taobao.com,login.taobao.com。所以如果要實現在login.taobao.com登錄后,在其他的子域名下依然可以取到Session,這要求我們在多臺服務器上同步Session。使用JWT的方式則沒有這個問題的存在,因為用戶的狀態已經被傳送到了客戶端。

          回到目錄

          五 跨域問題解決

          當客戶端和服務端分開部署到不同服務器的時候,就會遇到跨域訪問的問題,是由瀏覽器同源策略限制的一類請求場景。

          跨域解決方案有很多種,下面使用Nginx反向代理的方案

          反向代理

          代理訪問其實在實際應用中有很多場景,在跨域中應用的原理做法為:通過反向代理服務器監聽同端口,同域名的訪問,不同路徑映射到不同的地址,比如,在nginx服務器中,監聽同一個域名和端口,不同路徑轉發到客戶端和服務器,把不同端口和域名的限制通過反向代理,來解決跨域的問題:

          復制代碼

          復制代碼

          server {
          listen       80;
          server_name  domain.com;
          #charset koi8-r;
          #access_log  logs/host.access.log  main;
          location /client { #訪問客戶端路徑
          proxy_pass http://localhost:81;
          proxy_redirect default;
              }
          location /apis { #訪問服務器路徑
          rewrite  ^/apis/(.*)$ /$1 break;
          proxy_pass   http://localhost:82;
              }
          }

          復制代碼

          推薦產品查看更多

            <track id="7jmaw"><span id="7jmaw"></span></track>

            <bdo id="7jmaw"></bdo>

            
            
            <track id="7jmaw"></track>
                <menuitem id="7jmaw"><dfn id="7jmaw"></dfn></menuitem>
                <track id="7jmaw"><span id="7jmaw"></span></track>
              1. 
                

                1. <track id="7jmaw"><div id="7jmaw"></div></track>