原理:

????????驗(yàn)證碼在前端顯示,但是是在后端生成, 將生成的驗(yàn)證碼存入redis,待登錄時,前端提交驗(yàn)證碼,與后端生成的驗(yàn)證碼比較. ??

詳細(xì)解釋:

?????????圖形驗(yàn)證碼的原理(如下圖代碼).前端發(fā)起獲取驗(yàn)證碼的請求后,

????????1 后端接收請求,生成一個鍵key(隨機(jī)的鍵)?? 然后生成一個驗(yàn)證碼作為map的value.將key value set到HashMap(鍵不能重復(fù))中,

? ? ? ? 2然后將此key,value存儲到redis中,設(shè)置過期時間為5分鐘.隨后將map中的鍵值對返回到前端,注意此map有效時間是根據(jù)redis的有效時間而定.

-------html

--------js? ??3 前端獲取到該map如下圖

將后端獲取到的value顯示到前端,然后將key保存到form中,當(dāng)點(diǎn)擊登陸時,此時將form中的用戶自己輸入的驗(yàn)證碼的值,和后端傳遞回來的key還有賬戶,密碼傳遞到后端,后端拿到這個自己曾經(jīng)傳遞回來的key和redis中的key進(jìn)行尋找,然后將用戶輸入的value與redis對應(yīng)的key相比較,如若成功,則成功進(jìn)行下一步,進(jìn)行數(shù)據(jù)庫交互,比較賬戶密碼.

寫一個5分鐘自動換驗(yàn)證碼的方法

鉤子函數(shù)調(diào)用即可

相關(guān)依賴

?效果圖

如圖所示,圖形驗(yàn)證碼,將圖形驗(yàn)證碼的函數(shù)寫在鉤子函數(shù)中,加載頁面即顯示,

?