- 保證實(shí)現(xiàn)登錄的唯一性
靠后端session來(lái)控制礼仗，將登錄者的id存在session會(huì)話中胖翰，比如session['user']，即在登錄的時(shí)候后臺(tái)設(shè)置session['user']=$loginUser($loginUser是從前端拿到的登錄賬號(hào)名變量壕曼，這里以php為例)，這樣就在該用戶訪問期間一直對(duì)著這個(gè)用戶月褥，如果換成另一個(gè)用戶，session['user']會(huì)變成另一個(gè)用戶的id瓢喉，所以第一個(gè)用戶的session會(huì)話就會(huì)被中斷吓坚，這樣可以保證一個(gè)瀏覽器只能同時(shí)登錄一個(gè)用戶。
這里需要理解的就是session是服務(wù)器為了區(qū)分當(dāng)前客戶端而為其分配的不同的“身份標(biāo)志”灯荧，然后客戶端每次向服務(wù)器發(fā)送請(qǐng)求的時(shí)候礁击，都帶上這個(gè)身份標(biāo)志服務(wù)器就知道是誰(shuí)發(fā)的了 - 關(guān)于驗(yàn)證
盡量告訴用戶哪里出了問題，并提前預(yù)知用戶會(huì)做那些事情逗载，從而進(jìn)一步優(yōu)化體驗(yàn)
- 用戶名為空或格式不對(duì)--提示錯(cuò)誤哆窿，清空密碼框，聚焦到用戶名
- 用戶名不存在--同上
- 密碼錯(cuò)誤 -- 提示錯(cuò)誤厉斟，清空密碼框挚躯，聚焦密碼框
- 狀態(tài)提示
什么是狀態(tài)提示？有時(shí)候因?yàn)榫W(wǎng)絡(luò)原因擦秽，點(diǎn)擊提交 button 之后码荔，ajax 傳輸半天沒有響應(yīng)，用戶等了半天頁(yè)面一點(diǎn)提示都沒有感挥，這個(gè)肯定會(huì)讓用戶焦急的缩搅。回頭看看 Gmail触幼，一個(gè)把 ajax 發(fā)揮到極致的 web應(yīng)用硼瓣，在用戶體驗(yàn)上做的也是相當(dāng)給力的，登錄郵箱的時(shí)候一個(gè) loading 動(dòng)畫置谦，旁邊還放了一個(gè)加載基本HTML（供慢速網(wǎng)絡(luò)使用）堂鲤，每一個(gè)操作都有提示，提示中還有一個(gè)撤銷操作的按鈕媒峡，數(shù)據(jù)進(jìn)行加載的時(shí)候瘟栖，如果加載時(shí)間過(guò)長(zhǎng)，期間會(huì)進(jìn)行多次不同的提示谅阿，并在最后給出一個(gè)確切的結(jié)果半哟，對(duì)于一個(gè)登錄框而言，需要做到這些：
- 一個(gè)明確的用于狀態(tài)提示的 box
- 等待 3s奔穿，結(jié)果沒有出來(lái)镜沽，提示用戶繼續(xù)等待
- 等待 6s，結(jié)果沒有出來(lái)贱田，提示用戶網(wǎng)絡(luò)不暢通
- 設(shè)置 10s 為超時(shí)缅茉，并告知用戶提交表單失敗
這些東西的實(shí)現(xiàn)并沒有太多的技術(shù)難度，但是可以給慢速網(wǎng)絡(luò)下的用戶帶來(lái)很好的體驗(yàn)和安全感男摧。
- 關(guān)于密碼傳輸混淆
關(guān)于密碼前端的加密蔬墩，采用https才是解決問題最好的方法译打！雖然前端并不能真正阻擋那些想要攻擊網(wǎng)站的hacker，但是可以提高其攻擊的成本拇颅。
詳細(xì)的探討可以參考鏈接
參考前端常用加密方法
參考MD5加密使用方法
參考MD5加密原理
最最基本的就是做一個(gè)混淆了：可以前后端共同定義一個(gè)對(duì)照庫(kù)奏司，加上時(shí)間戳，傳送給后端樟插，后端根據(jù)約定的庫(kù)和時(shí)間戳來(lái)處理韵洋。
同時(shí)提示 服務(wù)端也不要命文存儲(chǔ)密碼
- cookie
cookie是客戶端保存用戶信息的一種機(jī)制，用來(lái)記錄客戶信息
cookie中httponly：從安全的角度后端在setCookie的時(shí)候可以將其httponly屬性設(shè)置為true黄锤，此時(shí)cookie將無(wú)法通過(guò)腳本獲取搪缨、編輯，提高系統(tǒng)安全性鸵熟。
cookie 也可以用于存儲(chǔ)用戶登錄狀態(tài) 存放session id （session是保存在服務(wù)端的一個(gè)數(shù)據(jù)結(jié)構(gòu)副编，用來(lái)跟蹤用戶狀態(tài)）
cookie 可以幫助實(shí)現(xiàn)記住密碼功能，當(dāng)用戶訪問網(wǎng)站的時(shí)候流强，網(wǎng)站的頁(yè)面腳本可以讀取這個(gè)信息痹届，自動(dòng)幫你把用戶名等信息填充。
提示：對(duì)于系統(tǒng)安全要求比較高的系統(tǒng)打月，不建議做記住密碼功能队腐，無(wú)論密碼以何種形式保存，都是不安全的僵控。 - 關(guān)于用戶登錄后的的返回鍵
登陸之后香到，跳轉(zhuǎn)到另外一個(gè)頁(yè)面，但是瀏覽器本身有前進(jìn)和后退的功能报破，有時(shí)點(diǎn)擊后退回導(dǎo)致頁(yè)面返回到之前的登錄頁(yè)面，但事實(shí)是用戶已經(jīng)登錄了千绪，所有頁(yè)面的狀態(tài)都應(yīng)該是已登錄的充易，不管什么情況下都不應(yīng)該讓用戶在看到這個(gè)頁(yè)面。
此時(shí)不建議采用window.location.href荸型，這樣瀏覽器還是會(huì)記錄這個(gè)登錄歷史盹靴，應(yīng)該使用 window.location.replace，替換當(dāng)前歷史記錄瑞妇。
如果你是用React-router來(lái)完成的可以參考我的另外一篇文章
