[發明專利]一種基于React實現圖片驗證碼生成及刷新的方法

在審

• 申請號: 201810716576.6
• 申請日: 2018-07-03
• 公開（公告）號: CN108959899A
• 公開（公告）日: 2018-12-07
• 發明（設計）人: 王月鳳;李曉燕;唐軍;顧艦靈
• 申請（專利權）人: 四川長虹電器股份有限公司
• 主分類號: G06F21/36
• 分類號: G06F21/36;G06F21/46
• 代理公司: 四川省成都市天策商標專利事務所 51213
• 代理人: 李潔

1.一種基于React實現圖片驗證碼生成及刷新的方法，其特征在于，具體包含以下步驟：

A.當用戶點開登錄頁面的同時，獲取到該用戶的該操作的唯一碼，并將此唯一碼傳給服務器，等待服務器返回圖片地址及數字字母驗證碼；

B.獲取服務器返回的圖片地址及數字字母驗證碼，給圖片地址加上時間戳并將對應的圖片渲染到頁面上；

C.當用戶輸入頁面上展示的圖片的驗證碼信息時，獲取用戶輸入的驗證碼與服務器返回的信息進行比對，若用戶輸入驗證碼錯誤則提示用戶并重復步驟C，否則進入步驟D；

D.提示用戶輸入登錄密碼并驗證用戶輸入登錄密碼是否正確，若用戶輸入登錄密碼錯誤則重新獲取用戶的唯一碼并返回步驟A，否則，響應用戶的登錄；

E.若用戶點擊刷新圖片，則在圖片上加上一個點擊事件，同時獲取帶時間戳的圖片地址，并將對應的圖片渲染到頁面上。

2.根據權利要求1所述的一種基于React實現圖片驗證碼生成及刷新的方法，其特征在于，所述步驟B及步驟E中將圖片渲染到頁面上時具體是通過對react生命周期的運用與和redux的結合，在接受任意輸入的組件props的更新中獲取發起請求前的下一次唯一碼及redux中存儲的數據，使數據在操作的同時獲得，并將對應的圖片渲染到頁面上。

3.根據權利要求2所述的一種基于React實現圖片驗證碼生成及刷新的方法，其特征在于，所述步驟E具體為：

E.若用戶點擊刷新圖片，在img標簽中加上在接受任意輸入的組件props的更新中請求接口后得到的圖片地址并添加點擊事件并綁定一個功能性組件function，在功能性組件function中請求redux中的圖片接口，并在接受任意輸入的組件props的周期中判段接口是否請求成功，并在成功時獲取圖片地址并在圖片地址后面加上時間戳，再將對應的圖片渲染到頁面上。

4.根據權利要求1或3所述的一種基于React實現圖片驗證碼生成及刷新的方法，其特征在于，所述時間戳是獲取當前時間后進行倍數處理得到的。