以前都是開始一段廢話的,現在直接進入主題,首先介紹一下一些概念:
單頁應用:
優點:
- 具有桌面應用的即時性、網站的可移植性和可通路性。
- 使用者體驗好、快,内容的改變不需要重新加載整個頁面,web應用更具響應性和更令人着迷。
- 基于上面一點,SPA相對對伺服器壓力小。
- 良好的前後端分離。SPA和RESTful架構一起使用,後端不再負責模闆渲染、輸出頁面工作,web前端和各種移動終端地位對等,後端API通用化。
- 對前端人員javascript技能要求更高,促使團隊技能提升。
缺點:
- 不利于SEO。
- 初次加載耗時相對增多。
- 導航不可用,如果一定要導航需要自行實作前進、後退。
- 對開發人員技能水準、開發成本高。
多角色:項目設計中多角色參與,比如我現在做的系統,除了有個人使用者,還有開店的商戶進行登入2種角色
session:這個不多說,背景系統判斷使用者活躍存在的一種身份憑證。PS:現在很多大型公司都自己做session管理
問題再現:
- 在一個浏覽器中,首先使用個人使用者登入(現在該浏覽器針對該站點發送的請求為個人使用者的session)
- 然後在浏覽器中新開一個标簽頁,同樣通路該網址,然後安全退出,清除cookie儲存的一些資訊和伺服器的session資料。然後使用商戶賬号進行登入(現在整個浏覽器針對于該域名,發送的請求都使用該商戶的session)
- 現在切換到第一個标簽頁,是個人的首頁,然後點一個功能按鈕,監控xhr的請求,你會發現個人使用者請求的session憑據并不是個人的,被商戶的辨別覆寫了,且占用了商戶的session去發送請求
- 這樣得到的結果肯定是錯的。是以必須解決該問題
測試淘寶:
- 登入第一個賬戶

- 新開标簽頁輸入相同網址
- 網頁會自動跳轉到和标簽也一樣的頁面
- 登出新的賬号,第一個标簽頁還是在第一個人的個人中心那裡
- 登入第二個賬戶,這個時候第一個标簽頁是第一個賬戶的個人資訊,第二個标簽頁是第二個賬戶的個人資訊
- 這個時候,浏覽器針對這個域名,其實存儲的已經是第二個賬戶的所有資訊了,包括session_id。是以點選第一個标簽頁的任何操作,如果不重新整理頁面的話(也就是單頁應用),會以第二個使用者的session_id去請求資料。但是淘寶是重新整理整個頁面就不存在這個問題了。
- 這樣整頁重新整理就是第二個賬戶的所有的資訊了。如果系統多角色,而且多角色菜單啊,和業務功能不一樣的話,就會更明顯發現大問題,搶占session,無法正确請求資料
解決方案:
确立解決手段:經過測試淘寶網站發現,淘寶針對這種問題,每次操作都會重新整理頁面,因為重新整理頁面所有資料都将重新向背景請求,是以不會存在該問題:不重新整理頁面然後通過ajax一步請求資料。是以解決手段就是隻要重新整理頁面全部重新請求資料就不會出現這個問題。
關鍵問題:怎麼去讓浏覽 器每次去鑒别是否為一個使用者,然後讓浏覽器主動去重新整理頁面
解決步驟:
-
- 因為問題關鍵是使用者發出的請求會被商戶的覆寫叼,是以确認第一步在使用者每次請求的時候去檢查使用者session_id是否一緻(為同一個使用者)
- 在前端每次發送ajax請求的時候去檢查每次使用者登入的時候緩存的session_id是否和目前浏覽器登入的使用者使用的session_id是否一緻
- 因為安全退出的時候我們會清除所有該域名下的cookie(這是我們設定的規則),然後使用者登入更新cookie,是以cookie中無法去檢測是否一緻。PS:其實在cookie中也可以判斷,每次登入判斷oldSession_id是否有值,沒有的話就将oldSession_id和newSession_id都設定為該使用者的Session_id,安全退出的時候隻清除newSession_id,使用者在新标簽頁再登入的時候判斷oldSession_id的值,然後設定newSession_id的值。這樣就可以比對了,但是我們的規則是清除所有的cookie,是以沒辦法,這裡我們走不通。
- 最後靈光一閃,想到了單頁應用的優點:不重新整理頁面,進而進行局部重新整理或操作。這就代表着,單頁應用每次進行dom渲染完成之後,就不會第二次渲染整個頁面的dom,也就代表了window對象不會像每次頁面重新整理重置window中的方法和對象了,那麼我們就可以将每次緩存目前使用者的session_id到window對象中,這樣的話,我們每次請求的時候取到每次使用者登入緩存的session_id和及時更新的cookie中的目前使用者的session_id進行比對,如果不一樣,那麼就可以重新整理頁面,整個頁面重新去請求整個資料,這樣就不會出現這樣覆寫session_id的問題
- 好了,問題解決了,但是需要注意的是,每次新開一個單頁應用頁面都要緩存一下session_id這樣很繁瑣,但是沒辦法,業務規則确定了安全退出,不留任何痕迹。繁瑣不是問題,解決問題才不是問題
其實解決問題的方式有千萬種,沒有你解決不了的,隻有你想不到的。程式員的路還很漫長,如果目标更大一點,架構師啊或者其他的話,這樣的路更長。而且在職場的話,老闆不是要的你的各種阻塞的理由,而是一個結果,你解決了沒有?解決了,ok能力杠杠的,解決不了,對不起,能力還欠缺。是以,我的原則是:能做的,漂亮的解決;不能做的,評估一下,想方設法去解決,這樣才能讓老闆或者你的上司相信你,安心把事情給你做,這樣的話,老闆器重你了,升職加薪也不是問題咯。
分享我的全棧書簽(持續內建中):https://github.com/GerryIsWarrior/MyBookmarks 希望點顆星,這才是我的動力
個人簡介:
- 性别:男
- 愛好:女
- 目标:全棧架構師
- github:https://github.com/GerryIsWarrior