Vue3問題：如何實現(xiàn)密碼加密登錄？前后端！

序言

大家好，我是大澈！

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),東興企業(yè)網(wǎng)站建設(shè),東興品牌網(wǎng)站建設(shè),網(wǎng)站定制,東興網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,東興網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

本文約3400+字，整篇閱讀大約需要6分鐘。

本文主要內(nèi)容分三部分，第一部分是需求分析，第二部分是實現(xiàn)步驟，第三部分是問題詳解。

如果您只需要解決問題，請閱讀第一、二部分即可。

如果您有更多時間，進一步學(xué)習(xí)問題相關(guān)知識點，請閱讀至第三部分。

1、需求分析

在前端，用戶點擊登錄和注冊時，在登錄和注冊接口中不允許看到請求中真正的用戶密碼。

在后端，用戶點擊登錄和注冊時，在數(shù)據(jù)庫中不允許存取真正的用戶密碼。

2、實現(xiàn)步驟

（1）實現(xiàn)前的說明

在學(xué)習(xí)如何使用之前，我們要明白的是，在項目中如果進行密碼加密，有哪幾種情況。然后就是，實現(xiàn)密碼加密的方式有哪些，哪一種是相較來說，較好用及安全性較高的。

密碼加密實現(xiàn)情況：

• 前端進行密碼加密，后端也進行密碼加密。
• 前端進行密碼加密，后端不進行密碼加密。
• 前端不進行密碼加密，后端進行密碼加密。

已上這三種情況，在實際的開發(fā)中，使用較多的，當(dāng)然是第一種情況，這種情況可以提供更高的安全性和密碼保護。

前端將用戶密碼進行加密后再傳輸給后端，可以減少密碼在網(wǎng)絡(luò)傳輸過程中的風(fēng)險，確保密碼的機密性。

后端再對接收到的密碼進行加密，將加密后的密碼存儲到數(shù)據(jù)庫中。這樣即使數(shù)據(jù)庫遭到非法訪問，密碼也不會以明文形式暴露，增加了密碼的安全性。

這一點說明到這里打住，不再贅述。

然后就是實現(xiàn)密碼加密的常用方式：

• 對稱加密算法：AES、DES、3DES
• 非對稱加密算法：RSA
• 哈希函數(shù)：MD5、SHA-1、SHA-256、SHA-512
• 密碼推導(dǎo)函數(shù)：BCrypt、PBKDF2、SCrypt

對稱加密算法使用相同密鑰進行加密和解密，非對稱加密算法使用公鑰和私鑰，哈希函數(shù)將數(shù)據(jù)轉(zhuǎn)換為固定長度的哈希值，密碼推導(dǎo)函數(shù)通過迭代和加鹽增加密碼破解難度。

上述加密方式，從上往下，安全性依次增高。

這一點在這里只做簡要說明，有需要的朋友，請見第三部分對加密方式的詳細總結(jié)。

搞清楚這些，然后下面，就是如何使用的問題了。

為提高大家的使用效率，這里大澈只提供較常用的情況(第一種)，以及較安全的密碼加密方式(BCrypt)的使用。

其它加密方式的使用，與此大同小異。

（2）編寫前端代碼

模板代碼：