SPA項(xiàng)目經(jīng)驗(yàn)總結(jié)

最近選用了 React + React-Router 的技術(shù)棧,自然而然走了 SPA 的路線六剥,下面總結(jié)下在所謂的 SPA 下的一些技術(shù)點(diǎn)的坑。

登錄態(tài)的維持

  1. 現(xiàn)有方案
    登錄頁(yè)面發(fā)起 Ajax 請(qǐng)求獲得用戶 token惶洲,把 token 存放在 localStorage 里面抓督,然后通過前端路由跳轉(zhuǎn)到用戶主頁(yè)。隨后用戶相關(guān)的請(qǐng)求都會(huì)在 http head 里面帶上這個(gè) token邑贴。服務(wù)器端只負(fù)責(zé)驗(yàn)證每次請(qǐng)求中 token 的合法性(譬如:是否過期)席里。

  2. 遇到的問題
    把 token 保存在 localStorage 中主要考慮用戶打開瀏覽器多個(gè) tab 頁(yè)可以維持登陸態(tài)。但是存儲(chǔ)在 localStorage 里面的 token 面臨如下問題:

  • 被串改的風(fēng)險(xiǎn)比較大拢驾,一旦被篡改奖磁,可以跨用戶操作。
  • 多賬號(hào)登錄相互覆蓋 localStorage 中 token 的問題繁疤。
  1. 解決方案
    針對(duì)多賬號(hào)登錄相互覆蓋的問題咖为,現(xiàn)有采取的方案是在登錄后分別在內(nèi)存和 localStorage 里面保存一份 token,每次要用到 token 的時(shí)候都去對(duì)比一下嵌洼,如果檢測(cè)到不一樣則提示用戶關(guān)閉當(dāng)前窗口防止串號(hào)案疲。這么做的目的一來防止用戶自己被多個(gè)賬號(hào)誤導(dǎo),二來如果關(guān)閉了檢測(cè)到串號(hào)的窗口麻养,不影響后登錄的那個(gè)賬號(hào)使用(當(dāng)然如果前一個(gè)窗口不關(guān)閉也沒有問題褐啡,js 使用的始終是內(nèi)存中的 token)。

    但是當(dāng)同一個(gè)用戶開多個(gè)窗口鳖昌,那么新開的窗口中的 token 第一次獲取就只能從 localStorage 里面獲取备畦。這時(shí)就有 token 被篡改可以跨用戶操作的風(fēng)險(xiǎn)。針對(duì)這個(gè)風(fēng)險(xiǎn)我預(yù)想了解決方案(需要用到 session 存儲(chǔ) token):
    1. 在已經(jīng)登錄一個(gè)賬號(hào)的情況下许昨,不允許開新瀏覽器窗口進(jìn)行其他賬戶的登錄懂盐,即如果檢測(cè)到當(dāng)前已經(jīng)是登錄態(tài)則不允許用戶停留在登錄頁(yè)。


      singleuser
    2. 在已經(jīng)登錄一個(gè)賬號(hào)的情況下糕档,允許開新瀏覽器窗口進(jìn)行其他賬戶的登錄莉恼。


      multiuserlogin

      這種情況下如果登錄了第二個(gè)賬戶,第一個(gè)窗口(第一個(gè)賬號(hào))要再進(jìn)行任何操作,傳回的 token 就和 server session 中的 token 不匹配俐银,server 就可以返回狀態(tài)碼讓前端把用戶登出尿背。

多路由模塊共享數(shù)據(jù)同步問題

如果多路由之間有相關(guān)的業(yè)務(wù)數(shù)據(jù),那么為了減少請(qǐng)求捶惜,提高用戶體驗(yàn)田藐,最好把多路由相關(guān)的數(shù)據(jù)共同抽象到一個(gè)地方,譬如 redux 的 store 里面吱七。這樣一個(gè)路由改了數(shù)據(jù)汽久,當(dāng)切換到另一個(gè)路由就不需要從后臺(tái)再拉一遍數(shù)據(jù)的最新狀態(tài)。這點(diǎn)對(duì)于單人開發(fā)沒有問題踊餐,但是對(duì)于多人協(xié)作就需要提前設(shè)計(jì)數(shù)據(jù)存放結(jié)構(gòu)景醇,約定接口。一邊做一邊改就容易出現(xiàn)溝通問題吝岭,數(shù)據(jù)架構(gòu)也不容易統(tǒng)一啡直。

異步任務(wù)的狀態(tài)問題

針對(duì)有異步任務(wù)的情況就要考慮狀態(tài)更新的問題。因?yàn)轫?yè)面提交了一個(gè)請(qǐng)求修改數(shù)據(jù)苍碟,但是數(shù)據(jù)被修改的最新狀態(tài)無(wú)法立即體現(xiàn)在當(dāng)前界面上酒觅,那么就會(huì)有如下問題:

  1. 頁(yè)面如何處理中間態(tài)即處理中的狀態(tài)提示。
  2. 頁(yè)面是否需要接入服務(wù)器推送微峰,等異步任務(wù)完成后把結(jié)果推送到頁(yè)面來更新狀態(tài)舷丹。
  3. 異步任務(wù)還沒有完成,用戶刷新了頁(yè)面并又提交了相同的任務(wù)如何處理蜓肆。

問題1如果中間態(tài)存儲(chǔ)在前端颜凯,一旦用戶刷新頁(yè)面或者新開頁(yè)面就轉(zhuǎn)換成問題3了,所以后臺(tái)一定要做好驗(yàn)證仗扬,前端無(wú)法嚴(yán)格維持狀態(tài)症概。還有一種情況就是后端存儲(chǔ)中間態(tài),那么無(wú)論是刷新還是新開頁(yè)面用戶都能夠看到中間態(tài)也會(huì)避免提交重復(fù)請(qǐng)求早芭,但是這種方案就增加了后端的復(fù)雜度彼城,需要根據(jù)項(xiàng)目的需求自行決定。

問題2涉及兩個(gè)方面:一來是接入推送服務(wù)增加復(fù)雜度的問題退个,需要酌情考慮募壕。二來是提高用戶體驗(yàn)的問題如果最新的狀態(tài)需要及時(shí)通知到用戶,那么推送方案就要在技術(shù)選型時(shí)考慮在內(nèi)语盈。

多人操作同份數(shù)據(jù)

這個(gè)問題最典型的就是項(xiàng)目管理工具舱馅,針對(duì)同一個(gè)任務(wù)兩個(gè)人同時(shí)開著界面,如果一個(gè)人認(rèn)領(lǐng)了刀荒,那么另一個(gè)人一般情況下是無(wú)法知道的代嗤,可能會(huì)造成“誤操作”棘钞。這個(gè)時(shí)候增加推送功能能極大的提高用戶體驗(yàn)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末干毅,一起剝皮案震驚了整個(gè)濱河市武翎,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌溶锭,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,590評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件符隙,死亡現(xiàn)場(chǎng)離奇詭異趴捅,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)霹疫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門拱绑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人丽蝎,你說我怎么就攤上這事猎拨。” “怎么了屠阻?”我有些...
    開封第一講書人閱讀 169,301評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵红省,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我国觉,道長(zhǎng)吧恃,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,078評(píng)論 1 300
  • 正文 為了忘掉前任麻诀,我火速辦了婚禮痕寓,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蝇闭。我一直安慰自己呻率,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,082評(píng)論 6 398
  • 文/花漫 我一把揭開白布呻引。 她就那樣靜靜地躺著礼仗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪逻悠。 梳的紋絲不亂的頭發(fā)上藐守,一...
    開封第一講書人閱讀 52,682評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音蹂风,去河邊找鬼卢厂。 笑死,一個(gè)胖子當(dāng)著我的面吹牛惠啄,可吹牛的內(nèi)容都是我干的慎恒。 我是一名探鬼主播任内,決...
    沈念sama閱讀 41,155評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼融柬!你這毒婦竟也來了死嗦?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,098評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤粒氧,失蹤者是張志新(化名)和其女友劉穎越除,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體外盯,經(jīng)...
    沈念sama閱讀 46,638評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡摘盆,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,701評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了饱苟。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片孩擂。...
    茶點(diǎn)故事閱讀 40,852評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖箱熬,靈堂內(nèi)的尸體忽然破棺而出类垦,到底是詐尸還是另有隱情,我是刑警寧澤城须,帶...
    沈念sama閱讀 36,520評(píng)論 5 351
  • 正文 年R本政府宣布蚤认,位于F島的核電站,受9級(jí)特大地震影響糕伐,放射性物質(zhì)發(fā)生泄漏烙懦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,181評(píng)論 3 335
  • 文/蒙蒙 一赤炒、第九天 我趴在偏房一處隱蔽的房頂上張望氯析。 院中可真熱鬧,春花似錦莺褒、人聲如沸掩缓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)你辣。三九已至,卻和暖如春尘执,著一層夾襖步出監(jiān)牢的瞬間舍哄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工誊锭, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留表悬,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,279評(píng)論 3 379
  • 正文 我出身青樓丧靡,卻偏偏與公主長(zhǎng)得像蟆沫,于是被迫代替她去往敵國(guó)和親籽暇。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,851評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理饭庞,服務(wù)發(fā)現(xiàn)戒悠,斷路器,智...
    卡卡羅2017閱讀 134,715評(píng)論 18 139
  • 22年12月更新:個(gè)人網(wǎng)站關(guān)停舟山,如果仍舊對(duì)舊教程有興趣參考 Github 的markdown內(nèi)容[https://...
    tangyefei閱讀 35,191評(píng)論 22 257
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,322評(píng)論 25 707
  • iOS網(wǎng)絡(luò)架構(gòu)討論梳理整理中绸狐。。累盗。 其實(shí)如果沒有APIManager這一層是沒法使用delegate的寒矿,畢竟多個(gè)單...
    yhtang閱讀 5,207評(píng)論 1 23
  • 1. BeeHive —— 一個(gè)優(yōu)雅但還在完善中的解耦框架 作者:一縷殤流化隱半邊冰霜描述:BeeHive是阿里巴...
    Ashen_閱讀 202評(píng)論 0 0