實(shí)戰(zhàn)：從QDialog到密碼驗(yàn)證與窗口切換)
1. 先想清楚登錄界面到底要解決什么問題很多朋友寫Qt程序?qū)懼鴮懼陀龅揭粋€(gè)繞不開的需求程序做完了功能跑得挺好但客戶那邊提了一嘴“你這軟件怎么誰打開都能用得加個(gè)登錄吧”。于是你開始在網(wǎng)上搜“QT 登錄界面”搜出來的東西五花八門有的是用QDialog彈個(gè)窗口有的是用QSS畫了個(gè)花里胡哨的界面但你照著做完了發(fā)現(xiàn)跟自己的程序根本合不到一起。我做過好幾個(gè)帶登錄模塊的Qt項(xiàng)目包括給企業(yè)內(nèi)部用的工具軟件、給學(xué)校實(shí)驗(yàn)室做的數(shù)據(jù)采集系統(tǒng)、還有給客戶定制的小型管理系統(tǒng)。這里頭最核心的問題其實(shí)不是“怎么畫一個(gè)登錄框”而是登錄界面和主程序之間怎么銜接登錄成功之后怎么跳轉(zhuǎn)、登錄狀態(tài)怎么傳遞、關(guān)閉登錄窗口時(shí)怎么不讓程序退出、密碼存哪里、錯(cuò)誤次數(shù)限制了怎么辦。這些才是實(shí)際工程里真正會(huì)踩坑的地方。這篇就把我自己的實(shí)踐拆開講一遍面向的是已經(jīng)能用Qt Creator寫簡單界面、想給自己的程序加登錄功能的朋友。我用的版本是Qt 5.15.2編譯器MSVC 2019 64bit這套代碼邏輯放到Qt 5.12到Qt 6.x都沒問題差異只在個(gè)別API上。2. 方案選型先想清這四件事再動(dòng)手2.1 登錄窗口用QDialog還是QWidget這是新手最容易糾結(jié)的問題。我的建議很直接首選QDialog原因有兩條。其一QDialog自帶exec()事件循環(huán)調(diào)用exec()之后代碼會(huì)阻塞在這一行直到用戶點(diǎn)擊“登錄”或“取消”。這樣主程序可以很自然地在登錄完成后繼續(xù)往下走不用搞復(fù)雜的信號(hào)槽鏈來通知窗口切換。其二QDialog作為模態(tài)窗口天然禁止用戶操作背后的主窗口這就保證了“不登錄就別想用”這個(gè)業(yè)務(wù)約束。那什么時(shí)候用QWidget呢如果你的登錄界面是嵌在主窗口內(nèi)部的一塊區(qū)域比如像Chrome的配置文件切換那種而不是獨(dú)立彈窗那用QWidget嵌進(jìn)布局就行。但絕大多數(shù)業(yè)務(wù)場景——無論是桌面客戶端還是帶啟動(dòng)校驗(yàn)的工具軟件——獨(dú)立登錄彈窗是主流所以直接用QDialog。2.2 登錄界面和主窗口是兩個(gè)窗口還是同一個(gè)窗口的兩個(gè)狀態(tài)你在網(wǎng)上搜“Qt登錄界面”搜出來的大部分教程都是這么教的main.cpp里先創(chuàng)建登錄Dialog然后show()等登錄成功后創(chuàng)建主窗口show()。這個(gè)做法本身沒問題但有個(gè)細(xì)節(jié)必須注意——登錄窗口關(guān)閉的時(shí)候不能讓程序以為用戶要退出。默認(rèn)情況下最后一個(gè)窗口關(guān)閉時(shí)Qt的事件循環(huán)就退出了程序結(jié)束。如果你的登錄Dialog是主窗口的成員變量那就還好如果是在main函數(shù)里new出來的局部變量登錄成功后Dialog被銷毀接下來馬上創(chuàng)建MainWindow程序不會(huì)退。怕就怕你在登錄成功的槽函數(shù)里寫了this-close()結(jié)果整個(gè)事件循環(huán)跟著退了。正確的做法要么是this-accept()QDialog自帶要么在main函數(shù)里用返回值判斷再?zèng)Q定怎么走。我個(gè)人的習(xí)慣是在main函數(shù)里控制流程不用復(fù)雜的信號(hào)槽跨窗口傳狀態(tài)。int main(int argc, char *argv[]) { QApplication a(argc, argv); LoginDialog dlg; // 用戶點(diǎn)了取消或直接關(guān)窗口不再繼續(xù) if (dlg.exec() ! QDialog::Accepted) { return 0; } MainWindow w; w.setCurrentUser(dlg.getLoginUser()); // 把登錄信息傳給主窗口 w.show(); return a.exec(); }這種寫法的好處是邏輯非常直觀登錄沒過就退出登錄過了才進(jìn)主程序。主窗口需要知道當(dāng)前登錄的是誰就通過getLoginUser()這個(gè)接口拿。QDialog的accept()被調(diào)用時(shí)exec()返回QDialog::Accepted整套流程嚴(yán)絲合縫。2.3 登錄驗(yàn)證放本地還是走后端做登錄界面之前得先明確一個(gè)問題你驗(yàn)證賬號(hào)密碼是拿著本地配置比對還是請求服務(wù)器這個(gè)決定影響整個(gè)代碼結(jié)構(gòu)。如果你的程序是純本地工具比如給公司內(nèi)部用的一個(gè)批量重命名軟件那登錄校驗(yàn)大概率是“輸入一個(gè)內(nèi)部約定的口令能對上就放行”那本地放一個(gè)簡單的配置或者哈希就夠。如果你做的是真正的多用戶系統(tǒng)賬號(hào)密碼在服務(wù)器上那你的登錄Dialog里應(yīng)該封裝一個(gè)網(wǎng)絡(luò)請求驗(yàn)證通過之后再走跳轉(zhuǎn)邏輯。我這次講的重點(diǎn)是本地校驗(yàn)因?yàn)榇蟛糠秩腴T項(xiàng)目、課設(shè)、工具軟件都是這個(gè)需求。后端的做法本質(zhì)上是把“本地比對”換成“HTTP POST請求比對”其余窗口銜接邏輯完全一樣。為了兼顧兩撥讀者我會(huì)在驗(yàn)證邏輯這一節(jié)把兩種方式都寫出來。2.4 界面和邏輯要不要分離登錄界面看似簡單但如果代碼全堆在LoginDialog類里后面想改需求比如加密方式換一下、密碼錯(cuò)誤次數(shù)鎖定你就得翻UI相關(guān)的代碼改來改去容易出錯(cuò)。我的建議是LoginDialog只管界面交互把賬號(hào)密碼的驗(yàn)證邏輯抽成一個(gè)單獨(dú)的工具類或接口比如叫AuthManager。這樣LoginDialog連接按鈕點(diǎn)擊信號(hào)調(diào)用AuthManager::login(username, password)拿返回值判斷成功失敗。以后如果要換驗(yàn)證后端或者加驗(yàn)證碼、短信驗(yàn)證、指紋識(shí)別只需要改AuthManager不動(dòng)界面代碼。3. 界面搭建不花哨但要有細(xì)節(jié)3.1 布局才是第一位的很多教程上來就拖控件、調(diào)字體最后出來的界面按鈕忽大忽小拉伸窗口時(shí)控件位置亂飛。正確的姿勢是一開始就想清楚布局層次。我自己習(xí)慣的登錄框布局從上到下大概是頂部留白 程序圖標(biāo)QLabel放個(gè)pngscaled保持寬高比標(biāo)題文字比如“XX數(shù)據(jù)管理系統(tǒng)”賬號(hào)輸入框QLineEdit密碼輸入框QLineEditsetEchoMode(QLineEdit::Password)可選的“記住密碼”QCheckBox一行排開登錄按鈕 取消按鈕外層用QVBoxLayout輸入框那一排可以用QFormLayout按鈕用QHBoxLayout最后整體包一層。然后給Dialog設(shè)置一個(gè)固定尺寸比如setFixedSize(360, 220)這樣登錄窗體不會(huì)因?yàn)閮?nèi)容變化而亂跳。有人會(huì)問為什么登錄框用固定尺寸因?yàn)榈卿浗缑娌恍枰赃m應(yīng)縮放窗口大小變化反而顯得不專業(yè)。主窗口才需要考慮拉伸和布局自適應(yīng)。3.2 拖控件還是手寫代碼用Qt Designer拖控件快但是存在一個(gè)問題如果團(tuán)隊(duì)里多人協(xié)作.ui文件合并沖突很麻煩而且你不一定清楚每個(gè)控件在代碼里怎么被引用。我自己是復(fù)雜布局用Designer簡單登錄框直接手寫代碼。手寫代碼的好處是你清楚每一個(gè)布局對象、每一個(gè)控件是怎么被創(chuàng)建和添加的。單看這段代碼就知道整個(gè)界面的結(jié)構(gòu)出問題容易排查。LoginDialog::LoginDialog(QWidget *parent) : QDialog(parent) { setWindowTitle(登錄); setFixedSize(360, 220); QLabel *iconLabel new QLabel(this); iconLabel-setPixmap(QPixmap(:/images/logo.png).scaled(48, 48, Qt::KeepAspectRatio, Qt::SmoothTransformation)); iconLabel-setAlignment(Qt::AlignCenter); QLabel *titleLabel new QLabel(后臺(tái)管理系統(tǒng)登錄, this); titleLabel-setAlignment(Qt::AlignCenter); QFont titleFont titleLabel-font(); titleFont.setPointSize(14); titleFont.setBold(true); titleLabel-setFont(titleFont); m_userEdit new QLineEdit(this); m_userEdit-setPlaceholderText(請輸入用戶名); m_userEdit-setClearButtonEnabled(true); m_passEdit new QLineEdit(this); m_passEdit-setPlaceholderText(請輸入密碼); m_passEdit-setEchoMode(QLineEdit::Password); m_rememberCheck new QCheckBox(記住密碼, this); QPushButton *loginBtn new QPushButton(登 錄, this); QPushButton *cancelBtn new QPushButton(取 消, this); // 布局 QVBoxLayout *mainLayout new QVBoxLayout(this); mainLayout-addSpacing(10); mainLayout-addWidget(iconLabel); mainLayout-addWidget(titleLabel); mainLayout-addSpacing(10); QFormLayout *formLayout new QFormLayout(); formLayout-addRow(賬號(hào):, m_userEdit); formLayout-addRow(密碼:, m_passEdit); mainLayout-addLayout(formLayout); mainLayout-addWidget(m_rememberCheck); QHBoxLayout *btnLayout new QHBoxLayout(); btnLayout-addStretch(); btnLayout-addWidget(loginBtn); btnLayout-addWidget(cancelBtn); mainLayout-addLayout(btnLayout); mainLayout-addSpacing(10); connect(loginBtn, QPushButton::clicked, this, LoginDialog::onLoginClicked); connect(cancelBtn, QPushButton::clicked, this, QDialog::reject); }這里有個(gè)小細(xì)節(jié)登錄按鈕和取消按鈕通常都有快捷鍵比如回車觸發(fā)登錄、Esc觸發(fā)取消?；剀囉|發(fā)登錄可以在LoginDialog里重寫keyPressEvent或者在QPushButton上設(shè)置setDefault(true)——一旦按鈕有了default屬性用戶在輸入框里敲回車就會(huì)觸發(fā)這個(gè)按鈕的點(diǎn)擊。loginBtn-setDefault(true);這一行代碼比我之前用事件過濾器實(shí)現(xiàn)回車登錄要省事得多。實(shí)測在QLineEdit上敲回車默認(rèn)會(huì)觸發(fā)Default按鈕的clicked信號(hào)。3.3 密碼框補(bǔ)充幾個(gè)交互細(xì)節(jié)密碼框看起來就是個(gè)QLineEdit但有幾個(gè)細(xì)節(jié)值得注意。第一是密碼可見性切換。在密碼框右側(cè)放一個(gè)小眼睛圖標(biāo)點(diǎn)擊時(shí)在Password和Normal之間切換。這個(gè)功能在移動(dòng)端App上很常見但桌面軟件里很多人嫌麻煩沒做。如果客戶明確要求密碼不可見那就不做如果只是內(nèi)部工具我建議還是加上用戶體驗(yàn)會(huì)好很多。第二是限制輸入長度。在QLineEdit上設(shè)置setMaxLength(32)防止有人復(fù)制一長串東西進(jìn)來后面校驗(yàn)的時(shí)候出幺蛾子。用戶名也做同樣的限制。第三是清空按鈕。setClearButtonEnabled(true)這一行用戶在輸入框有內(nèi)容時(shí)右側(cè)會(huì)出現(xiàn)一個(gè)小叉點(diǎn)一下能清空。說實(shí)話這功能在登錄框里有點(diǎn)雞肋因?yàn)橛脩敉ǔ１緛砭鸵斎氩粫?huì)誤填但從交互一致性角度加上也無妨。3.4 界面風(fēng)格快速統(tǒng)一登錄界面的樣式我通常用QSS來寫簡單又干凈setStyleSheet(R( QDialog { background-color: #f5f6fa; } QLineEdit { border: 1px solid #dcdde1; border-radius: 4px; padding: 6px 8px; font-size: 13px; background: white; } QLineEdit:focus { border: 1px solid #40739e; } QPushButton { background-color: #40739e; color: white; border: none; border-radius: 4px; padding: 6px 24px; font-size: 13px; } QPushButton:hover { background-color: #487eb0; } QPushButton:pressed { background-color: #353b48; } ));注意QSS里用:focus偽狀態(tài)來高亮當(dāng)前聚焦的輸入框這個(gè)細(xì)節(jié)能明顯提升界面的使用感受。QSS不需要系統(tǒng)學(xué)習(xí)會(huì)CSS的基本看一眼就懂但別用它來做復(fù)雜布局那是本末倒置。4. 登錄驗(yàn)證本地比對、加密存儲(chǔ)和超時(shí)次數(shù)4.1 最簡單的驗(yàn)證邏輯配置文件里比對先看一個(gè)最直白的本地驗(yàn)證實(shí)現(xiàn)。賬號(hào)密碼存哪里選項(xiàng)有幾個(gè)硬編碼在代碼里只適合課設(shè)演示代碼一泄露就完蛋存QSettings注冊表或ini普通明文安全性一般存SQLite數(shù)據(jù)庫適合用戶量大的情況存一個(gè)加密的配置文件我比較傾向這個(gè)我這里演示一種“配置文件存哈希”的方案。賬號(hào)密碼不直接存明文而是把密碼轉(zhuǎn)換為哈希值登錄時(shí)用同樣的哈希算法比對。先引入Qt的加密模塊在.pro文件里加上QT core sql如果是哈希算法Qt 5.15里QCryptographicHash可以直接用。#include QCryptographicHash #include QSettings class AuthManager { public: static bool login(const QString username, const QString password) { // 生產(chǎn)環(huán)境應(yīng)替換為讀取實(shí)際配置文件或數(shù)據(jù)庫 QString storedHash getStoredPasswordHash(username); if (storedHash.isEmpty()) return false; QByteArray hash QCryptographicHash::hash( password.toUtf8(), QCryptographicHash::Sha256).toHex(); return hash storedHash; } private: static QString getStoredPasswordHash(const QString username) { QSettings settings(config.ini, QSettings::IniFormat); settings.beginGroup(users); QString data settings.value(username).toString(); settings.endGroup(); return data; } };配置文件長得像這樣[users] admin2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824這個(gè)哈希值怎么來的簡單做法是找一個(gè)在線SHA256工具或者寫個(gè)臨時(shí)Qt小工具把密碼轉(zhuǎn)成哈希。我一般是寫一個(gè)命令行小程序#include QCoreApplication #include QCryptographicHash #include QDebug int main(int argc, char *argv[]) { QCoreApplication a(argc, argv); if (argc 2) { qDebug() usage: hash_gen password; return 1; } QByteArray hash QCryptographicHash::hash( QString::fromUtf8(argv[1]).toUtf8(), QCryptographicHash::Sha256); qDebug() hash.toHex(); return 0; }網(wǎng)上那些“在線MD5/SHA256生成”也能用但如果處理的密碼比較敏感建議本地跑這個(gè)工具別把明文密碼往網(wǎng)上貼。4.2 密碼加鹽不要直接哈希明文直接SHA256有一個(gè)很出名的問題如果用戶的密碼是弱密碼比如“123456”攻擊者可以拿一份彩虹表直接反查出原文。解決辦法是加鹽在密碼明文后面拼接一個(gè)隨機(jī)字符串再一起做哈希。加鹽這個(gè)知識(shí)點(diǎn)很多Qt教程不會(huì)講但我覺得這種安全細(xì)節(jié)必須在一開始就養(yǎng)成習(xí)慣。實(shí)現(xiàn)很簡單QString salt qT_salt_x9k2; // 每個(gè)用戶的隨機(jī)鹽 QByteArray hash QCryptographicHash::hash( (password salt).toUtf8(), QCryptographicHash::Sha256).toHex();注意鹽不能是全局固定的一個(gè)字符串——那樣效果跟不加鹽沒區(qū)別。好的做法是每個(gè)用戶一個(gè)隨機(jī)鹽注冊時(shí)生成并存儲(chǔ)登錄時(shí)取出該用戶的鹽再算哈希比對。4.3 登錄驗(yàn)證支持后端接口后端驗(yàn)證本質(zhì)上就是發(fā)HTTP請求。Qt里最簡單的方案是QNetworkAccessManager配合QNetworkRequest和QNetworkReply做異步請求。這里要特別提醒別在登錄按鈕的槽函數(shù)里寫QNetworkReply::waitForReadyRead()之類的阻塞調(diào)用那會(huì)導(dǎo)致界面卡死用戶體驗(yàn)極差。應(yīng)該用異步信號(hào)槽。void LoginDialog::onLoginClicked() { m_loginBtn-setEnabled(false); m_loginBtn-setText(登錄中...); QNetworkAccessManager *manager new QNetworkAccessManager(this); connect(manager, QNetworkAccessManager::finished, this, LoginDialog::onLoginReplyFinished); QNetworkRequest request(QUrl(http://127.0.0.1:8080/api/login)); request.setHeader(QNetworkRequest::ContentTypeHeader, application/json); QJsonObject obj; obj[username] m_userEdit-text(); obj[password] m_passEdit-text(); QNetworkReply *reply manager-post(request, QJsonDocument(obj).toJson()); connect(this, QDialog::rejected, reply, QNetworkReply::abort); }槽函數(shù)收到finished信號(hào)后檢查HTTP狀態(tài)碼、解析返回JSON判斷是否驗(yàn)證成功。注意一個(gè)問題如果用戶點(diǎn)擊“取消”或者關(guān)窗口網(wǎng)絡(luò)請求還在飛應(yīng)該在LoginDialog關(guān)閉時(shí)abort掉正在進(jìn)行的reply不然會(huì)出現(xiàn)dialog銷毀后回調(diào)還在執(zhí)行的情況輕則警告重則崩潰。4.4 失敗次數(shù)和鎖定策略登錄驗(yàn)證不能無限次重試否則等于沒有登錄。常用做法是連續(xù)輸錯(cuò)5次鎖定賬號(hào)或退出程序間隔30秒后才能重新嘗試。實(shí)現(xiàn)起來很簡單在LoginDialog里加兩個(gè)成員變量int m_failedTimes 0; QTimer *m_lockTimer nullptr;每失敗一次m_failedTimes加1超過閾值就禁用登錄按鈕啟動(dòng)一個(gè)單次定時(shí)器m_failedTimes; if (m_failedTimes 5) { m_loginBtn-setEnabled(false); m_lockTimer new QTimer(this); m_lockTimer-setSingleShot(true); connect(m_lockTimer, QTimer::timeout, this, [this]() { m_loginBtn-setEnabled(true); m_failedTimes 0; }); m_lockTimer-start(30000); }這個(gè)策略在不同系統(tǒng)里可能有差異但思路都一樣。別把鎖定時(shí)間做太長內(nèi)部工具鎖個(gè)30秒提醒一下就行否則使用者會(huì)懷疑程序崩了。4.5 記住密碼的存儲(chǔ)策略“記住密碼”這個(gè)功能說起來容易做起來有一堆講究。我的建議是勾選記住密碼時(shí)只記住用戶名密碼可以選擇記住但要用簡單混淆或系統(tǒng)密鑰存儲(chǔ)。對于純本地工具、沒有絕對安全要求的環(huán)境里把密碼明文寫到ini也能跑但最好做一層編碼。比如QString encoded QString(password.toUtf8().toBase64());這樣做不是加密只是不讓別人一眼看到明文。真正要安全的話應(yīng)該用系統(tǒng)提供的憑據(jù)存儲(chǔ)比如Windows的Credential Manager但那個(gè)集成成本有點(diǎn)高一般項(xiàng)目不需要。實(shí)現(xiàn)邏輯登錄成功之后如果記住密碼選中就把用戶名密碼寫進(jìn)QSettings下次啟動(dòng)時(shí)LoginDialog構(gòu)造函數(shù)里讀出來自動(dòng)填入輸入框。5. 登錄成功跳轉(zhuǎn)主程序窗口切換的完整流程5.1 信號(hào)槽通知主窗口還是main函數(shù)控制前面我在main函數(shù)里給出了最簡單方案exec()返回Accepted后創(chuàng)建主窗口。這個(gè)方案對于單窗口程序完全夠用。但也有兩種例外。第一種主窗口依賴登錄界面的數(shù)據(jù)用戶名、角色、權(quán)限而創(chuàng)建主窗口的代碼在main里這時(shí)先創(chuàng)建一個(gè)空的MainWindow等登錄成功后再調(diào)用它的initWithUser(user)方法填充數(shù)據(jù)——這個(gè)我剛才在代碼里已經(jīng)演示了。第二種你的程序是托盤程序或沒有主界面的后臺(tái)程序登錄成功之后不進(jìn)入主窗口而是啟動(dòng)后臺(tái)循環(huán)這種情況下就需要在main里判斷角色再?zèng)Q定執(zhí)行分支。這里有個(gè)小小的設(shè)計(jì)建議不要在MainWindow的構(gòu)造函數(shù)里做需要登錄信息的初始化因?yàn)闃?gòu)造函數(shù)里拿不到應(yīng)該提供一個(gè)顯式的方法比如void MainWindow::initForUser(const QString username)在登錄成功后調(diào)用。這樣MainWindow可以復(fù)用登錄模塊也可以復(fù)用。5.2 登錄成功后登錄窗口怎么收場登錄成功后登錄窗口的正確收場方式是調(diào)用accept()而不是close()更不是deleteLater()。原因上面提過accept()會(huì)讓exec()返回Accepted值main函數(shù)據(jù)此判斷繼續(xù)執(zhí)行close()在QDialog里默認(rèn)行為也是觸發(fā)reject()不過語義不清晰直接deleteLater()更是危險(xiǎn)——exec()的事件循環(huán)還沒結(jié)束刪除窗口會(huì)把事件循環(huán)搞亂。如果你不是在main里用exec()而是通過信號(hào)槽通知主窗口顯示那么登錄窗口的成功收場應(yīng)該是hide()留在內(nèi)存里萬一后續(xù)要重新登錄呢主窗口關(guān)閉時(shí)再統(tǒng)一釋放。5.3 登錄信息怎么傳給主窗口這里不推薦搞一個(gè)全局變量存用戶名。理由很簡單將來你的程序要加多用戶切換、要支持不同角色顯示不同菜單全局變量就不夠用了。更好的方案是定義一個(gè)UserInfo結(jié)構(gòu)體或類登錄成功后LoginDialog持有一個(gè)UserInfo對象主窗口通過LoginDialog::getUserInfo()獲取struct UserInfo { QString username; QString role; QString displayName; QString token; // 從服務(wù)器拿到的會(huì)話token };一個(gè)實(shí)用的小經(jīng)驗(yàn)UserInfo不要用QStringList或QVariantMap散裝存因?yàn)楦男枨髸r(shí)你根本不知道哪里用到了哪個(gè)字段。定義好結(jié)構(gòu)體主窗口拿到之后可以放心傳參、存儲(chǔ)、擴(kuò)展。5.4 超時(shí)自動(dòng)鎖屏進(jìn)階如果程序是給公司內(nèi)部用的可能會(huì)有這樣的需求用戶離開工位幾分鐘程序自動(dòng)鎖屏回來要重新輸密碼。實(shí)現(xiàn)思路是安裝一個(gè)全局事件過濾器監(jiān)控鼠標(biāo)鍵盤活動(dòng)長時(shí)間無操作就彈出一個(gè)全屏遮罩的鎖屏對話框用戶重新輸入密碼才能繼續(xù)。這個(gè)功能我實(shí)現(xiàn)過一次代碼量比較大但核心就兩件事事件過濾器和鎖屏Dialog。如果你已經(jīng)有登錄Dialog鎖屏Dialog可以復(fù)用它的驗(yàn)證邏輯只換一個(gè)界面標(biāo)題。6. 常見問題和避坑經(jīng)驗(yàn)6.1 Qt Creator里serialport模塊找不到很多讀者搜索Qt時(shí)會(huì)看到“unknown module in qt: serialport”的報(bào)錯(cuò)。這個(gè)跟登錄界面本身沒直接關(guān)系但波及面很廣我簡單說一下排查思路Qt SerialPort模塊不是默認(rèn)安裝的你用在線安裝器或離線安裝包裝Qt時(shí)如果沒勾選對應(yīng)模塊pro里寫QT serialport就會(huì)報(bào)Unknown module。解決方案是去Qt Maintenance Tool里勾選對應(yīng)模塊或者重新下載安裝包勾選SerialPort模塊。順帶說一句如果你用的是5.15.2離線安裝包安裝時(shí)一定要把該勾的組件都勾上很多坑其實(shí)是安裝時(shí)漏了組件。6.2 登錄成功后程序退出的坑這個(gè)現(xiàn)象非常經(jīng)典代碼按照教程寫了登錄按鈕執(zhí)行了LoginDialog沒了MainWindow也show出來了但整個(gè)程序立刻退出。原因就是你show了主窗口但主窗口是一個(gè)局部變量作用域結(jié)束后被銷毀程序所有窗口都關(guān)完了事件循環(huán)結(jié)束進(jìn)程退出。解決方案很簡單讓MainWindow的生命周期等于程序的生命周期。要么在main里以棧對象存在直到a.exec()結(jié)束要么new出來并設(shè)置為全局/成員不手動(dòng)delete。MainWindow w; w.show(); return a.exec(); // w的生命周期覆蓋整個(gè)事件循環(huán)6.3 中文亂碼問題Qt 5.15默認(rèn)用UTF-8只要你的源碼文件保存為UTF-8編碼中文字符串一般沒問題。但如果你的項(xiàng)目是從老版本Qt遷移過來的或者某些同事的IDE默認(rèn)GBK編碼源碼里的中文注釋和字符串可能亂成一片。排查手段先統(tǒng)一編碼。在pro文件里添加QMAKE_CXXFLAGS /utf-8MSVC編譯器強(qiáng)制編譯器按UTF-8解析源文件。這是MSVC下最實(shí)用的一個(gè)開關(guān)。6.4 打包發(fā)布時(shí)缺DLL登錄界面做完了程序功能也好了結(jié)果要把exe發(fā)給別人時(shí)雙擊運(yùn)行提示找不到“Qt5Core.dll”、“Qt5Widgets.dll”。解決辦法有兩條路一是用windeployqt工具自動(dòng)拷貝依賴庫。打開命令提示符cd到exe所在目錄執(zhí)行C:\Qt\5.15.2\msvc2019_64\bin\windeployqt.exe 你的程序名.exe它會(huì)自動(dòng)把所需的Qt DLL、平臺(tái)插件復(fù)制到exe目錄下。注意你的exe必須是Release版本Debug版本依賴的DLL體積大也不必發(fā)布。二是用打包工具做成安裝包比如Inno Setup或官方維護(hù)的Qt Installer Framework。我個(gè)人是先用windeployqt做目錄再打包流程穩(wěn)定。6.5 登錄框回車沒反應(yīng)前面講了setDefault(true)這里再補(bǔ)充如果你用QDialog自己重寫了keyPressEvent注意要調(diào)用父類實(shí)現(xiàn)別把默認(rèn)回車邏輯覆蓋掉了。void LoginDialog::keyPressEvent(QKeyEvent *event) { if (event-key() Qt::Key_Return || event-key() Qt::Key_Enter) { onLoginClicked(); return; } QDialog::keyPressEvent(event); }注意Enter和Return是兩個(gè)不同的鍵大鍵盤的回車是Key_Return小鍵盤的Enter是Key_Enter。判斷條件別漏了其中任意一個(gè)。6.6 Qt 5.15.2 和 5.15.3 庫混用崩潰有的讀者會(huì)遇到“cannot mix incompatible Qt library (5.15.3) with this library (5.15.2)”這種崩潰信息。這通常是你的程序編譯時(shí)用的Qt庫版本和運(yùn)行時(shí)加載的Qt庫版本不一致。比如你本機(jī)裝了多個(gè)Qt版本編譯用的5.15.2運(yùn)行時(shí)PATH里卻先找到了5.15.3的dll。排查辦法把exe目錄里的Qt DLL版本和編譯器的版本對齊或者用windeployqt重新部署。同時(shí)檢查環(huán)境變量PATH里有沒有別的Qt目錄混進(jìn)去了。這種崩潰特別隱蔽經(jīng)常是裝完新版本Qt后突然出現(xiàn)的。7. 最后給點(diǎn)小技巧做完這個(gè)登錄界面之后建議你把登錄模塊獨(dú)立編譯成一個(gè)子項(xiàng)目或者靜態(tài)庫。這樣下次新項(xiàng)目要加登錄功能直接把模塊引用過去換一下界面標(biāo)題就行不用重新寫一遍驗(yàn)證和跳轉(zhuǎn)邏輯。我自己就是第一版做完后抽了LoginDialog和AuthManager兩個(gè)類后面三個(gè)項(xiàng)目都直接復(fù)用改改密鑰和數(shù)據(jù)庫配置就好。另外提醒一個(gè)安全習(xí)慣不管用本地配置文件還是數(shù)據(jù)庫都不要放棄對密碼的哈希處理。很多工具軟件覺得“反正局域網(wǎng)用、沒什么機(jī)密”結(jié)果內(nèi)網(wǎng)被人摸進(jìn)來配置文件一打開全是明文賬號(hào)密碼那就很難看了。加鹽SHA256并不是多復(fù)雜的事幾十行代碼換來的是整個(gè)系統(tǒng)的底線安全。如果你把登錄界面做出來了但運(yùn)行過程中遇到窗口閃現(xiàn)、登錄狀態(tài)丟失、按鈕焦點(diǎn)錯(cuò)亂這類問題回頭檢查一下布局管理的使用方式——大多數(shù)都是生命周期和布局嵌套的問題跟登錄功能本身沒關(guān)系。把代碼理順了把模塊邊界切好了登錄功能自然是穩(wěn)穩(wěn)當(dāng)當(dāng)?shù)摹? Qt登錄界面開發(fā)實(shí)戰(zhàn)：從QDialog到密碼驗(yàn)證與窗口切換
1. 先想清楚登錄界面到底要解決什么問題很多朋友寫Qt程序?qū)懼鴮懼陀龅揭粋€(gè)繞不開的需求程序做完了功能跑得挺好但客戶那邊提了一嘴“你這軟件怎么誰打開都能用得加個(gè)登錄吧”。于是你開始在網(wǎng)上搜“QT 登錄界面”搜出來的東西五花八門有的是用QDialog彈個(gè)窗口有的是用QSS畫了個(gè)花里胡哨的界面但你照著做完了發(fā)現(xiàn)跟自己的程序根本合不到一起。我做過好幾個(gè)帶登錄模塊的Qt項(xiàng)目包括給企業(yè)內(nèi)部用的工具軟件、給學(xué)校實(shí)驗(yàn)室做的數(shù)據(jù)采集系統(tǒng)、還有給客戶定制的小型管理系統(tǒng)。這里頭最核心的問題其實(shí)不是“怎么畫一個(gè)登錄框”而是登錄界面和主程序之間怎么銜接登錄成功之后怎么跳轉(zhuǎn)、登錄狀態(tài)怎么傳遞、關(guān)閉登錄窗口時(shí)怎么不讓程序退出、密碼存哪里、錯(cuò)誤次數(shù)限制了怎么辦。這些才是實(shí)際工程里真正會(huì)踩坑的地方。這篇就把我自己的實(shí)踐拆開講一遍面向的是已經(jīng)能用Qt Creator寫簡單界面、想給自己的程序加登錄功能的朋友。我用的版本是Qt 5.15.2編譯器MSVC 2019 64bit這套代碼邏輯放到Qt 5.12到Qt 6.x都沒問題差異只在個(gè)別API上。2. 方案選型先想清這四件事再動(dòng)手2.1 登錄窗口用QDialog還是QWidget這是新手最容易糾結(jié)的問題。我的建議很直接首選QDialog原因有兩條。其一QDialog自帶exec()事件循環(huán)調(diào)用exec()之后代碼會(huì)阻塞在這一行直到用戶點(diǎn)擊“登錄”或“取消”。這樣主程序可以很自然地在登錄完成后繼續(xù)往下走不用搞復(fù)雜的信號(hào)槽鏈來通知窗口切換。其二QDialog作為模態(tài)窗口天然禁止用戶操作背后的主窗口這就保證了“不登錄就別想用”這個(gè)業(yè)務(wù)約束。那什么時(shí)候用QWidget呢如果你的登錄界面是嵌在主窗口內(nèi)部的一塊區(qū)域比如像Chrome的配置文件切換那種而不是獨(dú)立彈窗那用QWidget嵌進(jìn)布局就行。但絕大多數(shù)業(yè)務(wù)場景——無論是桌面客戶端還是帶啟動(dòng)校驗(yàn)的工具軟件——獨(dú)立登錄彈窗是主流所以直接用QDialog。2.2 登錄界面和主窗口是兩個(gè)窗口還是同一個(gè)窗口的兩個(gè)狀態(tài)你在網(wǎng)上搜“Qt登錄界面”搜出來的大部分教程都是這么教的main.cpp里先創(chuàng)建登錄Dialog然后show()等登錄成功后創(chuàng)建主窗口show()。這個(gè)做法本身沒問題但有個(gè)細(xì)節(jié)必須注意——登錄窗口關(guān)閉的時(shí)候不能讓程序以為用戶要退出。默認(rèn)情況下最后一個(gè)窗口關(guān)閉時(shí)Qt的事件循環(huán)就退出了程序結(jié)束。如果你的登錄Dialog是主窗口的成員變量那就還好如果是在main函數(shù)里new出來的局部變量登錄成功后Dialog被銷毀接下來馬上創(chuàng)建MainWindow程序不會(huì)退。怕就怕你在登錄成功的槽函數(shù)里寫了this-close()結(jié)果整個(gè)事件循環(huán)跟著退了。正確的做法要么是this-accept()QDialog自帶要么在main函數(shù)里用返回值判斷再?zèng)Q定怎么走。我個(gè)人的習(xí)慣是在main函數(shù)里控制流程不用復(fù)雜的信號(hào)槽跨窗口傳狀態(tài)。int main(int argc, char *argv[]) { QApplication a(argc, argv); LoginDialog dlg; // 用戶點(diǎn)了取消或直接關(guān)窗口不再繼續(xù) if (dlg.exec() ! QDialog::Accepted) { return 0; } MainWindow w; w.setCurrentUser(dlg.getLoginUser()); // 把登錄信息傳給主窗口 w.show(); return a.exec(); }這種寫法的好處是邏輯非常直觀登錄沒過就退出登錄過了才進(jìn)主程序。主窗口需要知道當(dāng)前登錄的是誰就通過getLoginUser()這個(gè)接口拿。QDialog的accept()被調(diào)用時(shí)exec()返回QDialog::Accepted整套流程嚴(yán)絲合縫。2.3 登錄驗(yàn)證放本地還是走后端做登錄界面之前得先明確一個(gè)問題你驗(yàn)證賬號(hào)密碼是拿著本地配置比對還是請求服務(wù)器這個(gè)決定影響整個(gè)代碼結(jié)構(gòu)。如果你的程序是純本地工具比如給公司內(nèi)部用的一個(gè)批量重命名軟件那登錄校驗(yàn)大概率是“輸入一個(gè)內(nèi)部約定的口令能對上就放行”那本地放一個(gè)簡單的配置或者哈希就夠。如果你做的是真正的多用戶系統(tǒng)賬號(hào)密碼在服務(wù)器上那你的登錄Dialog里應(yīng)該封裝一個(gè)網(wǎng)絡(luò)請求驗(yàn)證通過之后再走跳轉(zhuǎn)邏輯。我這次講的重點(diǎn)是本地校驗(yàn)因?yàn)榇蟛糠秩腴T項(xiàng)目、課設(shè)、工具軟件都是這個(gè)需求。后端的做法本質(zhì)上是把“本地比對”換成“HTTP POST請求比對”其余窗口銜接邏輯完全一樣。為了兼顧兩撥讀者我會(huì)在驗(yàn)證邏輯這一節(jié)把兩種方式都寫出來。2.4 界面和邏輯要不要分離登錄界面看似簡單但如果代碼全堆在LoginDialog類里后面想改需求比如加密方式換一下、密碼錯(cuò)誤次數(shù)鎖定你就得翻UI相關(guān)的代碼改來改去容易出錯(cuò)。我的建議是LoginDialog只管界面交互把賬號(hào)密碼的驗(yàn)證邏輯抽成一個(gè)單獨(dú)的工具類或接口比如叫AuthManager。這樣LoginDialog連接按鈕點(diǎn)擊信號(hào)調(diào)用AuthManager::login(username, password)拿返回值判斷成功失敗。以后如果要換驗(yàn)證后端或者加驗(yàn)證碼、短信驗(yàn)證、指紋識(shí)別只需要改AuthManager不動(dòng)界面代碼。3. 界面搭建不花哨但要有細(xì)節(jié)3.1 布局才是第一位的很多教程上來就拖控件、調(diào)字體最后出來的界面按鈕忽大忽小拉伸窗口時(shí)控件位置亂飛。正確的姿勢是一開始就想清楚布局層次。我自己習(xí)慣的登錄框布局從上到下大概是頂部留白 程序圖標(biāo)QLabel放個(gè)pngscaled保持寬高比標(biāo)題文字比如“XX數(shù)據(jù)管理系統(tǒng)”賬號(hào)輸入框QLineEdit密碼輸入框QLineEditsetEchoMode(QLineEdit::Password)可選的“記住密碼”QCheckBox一行排開登錄按鈕 取消按鈕外層用QVBoxLayout輸入框那一排可以用QFormLayout按鈕用QHBoxLayout最后整體包一層。然后給Dialog設(shè)置一個(gè)固定尺寸比如setFixedSize(360, 220)這樣登錄窗體不會(huì)因?yàn)閮?nèi)容變化而亂跳。有人會(huì)問為什么登錄框用固定尺寸因?yàn)榈卿浗缑娌恍枰赃m應(yīng)縮放窗口大小變化反而顯得不專業(yè)。主窗口才需要考慮拉伸和布局自適應(yīng)。3.2 拖控件還是手寫代碼用Qt Designer拖控件快但是存在一個(gè)問題如果團(tuán)隊(duì)里多人協(xié)作.ui文件合并沖突很麻煩而且你不一定清楚每個(gè)控件在代碼里怎么被引用。我自己是復(fù)雜布局用Designer簡單登錄框直接手寫代碼。手寫代碼的好處是你清楚每一個(gè)布局對象、每一個(gè)控件是怎么被創(chuàng)建和添加的。單看這段代碼就知道整個(gè)界面的結(jié)構(gòu)出問題容易排查。LoginDialog::LoginDialog(QWidget *parent) : QDialog(parent) { setWindowTitle(登錄); setFixedSize(360, 220); QLabel *iconLabel new QLabel(this); iconLabel-setPixmap(QPixmap(:/images/logo.png).scaled(48, 48, Qt::KeepAspectRatio, Qt::SmoothTransformation)); iconLabel-setAlignment(Qt::AlignCenter); QLabel *titleLabel new QLabel(后臺(tái)管理系統(tǒng)登錄, this); titleLabel-setAlignment(Qt::AlignCenter); QFont titleFont titleLabel-font(); titleFont.setPointSize(14); titleFont.setBold(true); titleLabel-setFont(titleFont); m_userEdit new QLineEdit(this); m_userEdit-setPlaceholderText(請輸入用戶名); m_userEdit-setClearButtonEnabled(true); m_passEdit new QLineEdit(this); m_passEdit-setPlaceholderText(請輸入密碼); m_passEdit-setEchoMode(QLineEdit::Password); m_rememberCheck new QCheckBox(記住密碼, this); QPushButton *loginBtn new QPushButton(登 錄, this); QPushButton *cancelBtn new QPushButton(取 消, this); // 布局 QVBoxLayout *mainLayout new QVBoxLayout(this); mainLayout-addSpacing(10); mainLayout-addWidget(iconLabel); mainLayout-addWidget(titleLabel); mainLayout-addSpacing(10); QFormLayout *formLayout new QFormLayout(); formLayout-addRow(賬號(hào):, m_userEdit); formLayout-addRow(密碼:, m_passEdit); mainLayout-addLayout(formLayout); mainLayout-addWidget(m_rememberCheck); QHBoxLayout *btnLayout new QHBoxLayout(); btnLayout-addStretch(); btnLayout-addWidget(loginBtn); btnLayout-addWidget(cancelBtn); mainLayout-addLayout(btnLayout); mainLayout-addSpacing(10); connect(loginBtn, QPushButton::clicked, this, LoginDialog::onLoginClicked); connect(cancelBtn, QPushButton::clicked, this, QDialog::reject); }這里有個(gè)小細(xì)節(jié)登錄按鈕和取消按鈕通常都有快捷鍵比如回車觸發(fā)登錄、Esc觸發(fā)取消?；剀囉|發(fā)登錄可以在LoginDialog里重寫keyPressEvent或者在QPushButton上設(shè)置setDefault(true)——一旦按鈕有了default屬性用戶在輸入框里敲回車就會(huì)觸發(fā)這個(gè)按鈕的點(diǎn)擊。loginBtn-setDefault(true);這一行代碼比我之前用事件過濾器實(shí)現(xiàn)回車登錄要省事得多。實(shí)測在QLineEdit上敲回車默認(rèn)會(huì)觸發(fā)Default按鈕的clicked信號(hào)。3.3 密碼框補(bǔ)充幾個(gè)交互細(xì)節(jié)密碼框看起來就是個(gè)QLineEdit但有幾個(gè)細(xì)節(jié)值得注意。第一是密碼可見性切換。在密碼框右側(cè)放一個(gè)小眼睛圖標(biāo)點(diǎn)擊時(shí)在Password和Normal之間切換。這個(gè)功能在移動(dòng)端App上很常見但桌面軟件里很多人嫌麻煩沒做。如果客戶明確要求密碼不可見那就不做如果只是內(nèi)部工具我建議還是加上用戶體驗(yàn)會(huì)好很多。第二是限制輸入長度。在QLineEdit上設(shè)置setMaxLength(32)防止有人復(fù)制一長串東西進(jìn)來后面校驗(yàn)的時(shí)候出幺蛾子。用戶名也做同樣的限制。第三是清空按鈕。setClearButtonEnabled(true)這一行用戶在輸入框有內(nèi)容時(shí)右側(cè)會(huì)出現(xiàn)一個(gè)小叉點(diǎn)一下能清空。說實(shí)話這功能在登錄框里有點(diǎn)雞肋因?yàn)橛脩敉ǔ１緛砭鸵斎氩粫?huì)誤填但從交互一致性角度加上也無妨。3.4 界面風(fēng)格快速統(tǒng)一登錄界面的樣式我通常用QSS來寫簡單又干凈setStyleSheet(R( QDialog { background-color: #f5f6fa; } QLineEdit { border: 1px solid #dcdde1; border-radius: 4px; padding: 6px 8px; font-size: 13px; background: white; } QLineEdit:focus { border: 1px solid #40739e; } QPushButton { background-color: #40739e; color: white; border: none; border-radius: 4px; padding: 6px 24px; font-size: 13px; } QPushButton:hover { background-color: #487eb0; } QPushButton:pressed { background-color: #353b48; } ));注意QSS里用:focus偽狀態(tài)來高亮當(dāng)前聚焦的輸入框這個(gè)細(xì)節(jié)能明顯提升界面的使用感受。QSS不需要系統(tǒng)學(xué)習(xí)會(huì)CSS的基本看一眼就懂但別用它來做復(fù)雜布局那是本末倒置。4. 登錄驗(yàn)證本地比對、加密存儲(chǔ)和超時(shí)次數(shù)4.1 最簡單的驗(yàn)證邏輯配置文件里比對先看一個(gè)最直白的本地驗(yàn)證實(shí)現(xiàn)。賬號(hào)密碼存哪里選項(xiàng)有幾個(gè)硬編碼在代碼里只適合課設(shè)演示代碼一泄露就完蛋存QSettings注冊表或ini普通明文安全性一般存SQLite數(shù)據(jù)庫適合用戶量大的情況存一個(gè)加密的配置文件我比較傾向這個(gè)我這里演示一種“配置文件存哈希”的方案。賬號(hào)密碼不直接存明文而是把密碼轉(zhuǎn)換為哈希值登錄時(shí)用同樣的哈希算法比對。先引入Qt的加密模塊在.pro文件里加上QT core sql如果是哈希算法Qt 5.15里QCryptographicHash可以直接用。#include QCryptographicHash #include QSettings class AuthManager { public: static bool login(const QString username, const QString password) { // 生產(chǎn)環(huán)境應(yīng)替換為讀取實(shí)際配置文件或數(shù)據(jù)庫 QString storedHash getStoredPasswordHash(username); if (storedHash.isEmpty()) return false; QByteArray hash QCryptographicHash::hash( password.toUtf8(), QCryptographicHash::Sha256).toHex(); return hash storedHash; } private: static QString getStoredPasswordHash(const QString username) { QSettings settings(config.ini, QSettings::IniFormat); settings.beginGroup(users); QString data settings.value(username).toString(); settings.endGroup(); return data; } };配置文件長得像這樣[users] admin2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824這個(gè)哈希值怎么來的簡單做法是找一個(gè)在線SHA256工具或者寫個(gè)臨時(shí)Qt小工具把密碼轉(zhuǎn)成哈希。我一般是寫一個(gè)命令行小程序#include QCoreApplication #include QCryptographicHash #include QDebug int main(int argc, char *argv[]) { QCoreApplication a(argc, argv); if (argc 2) { qDebug() usage: hash_gen password; return 1; } QByteArray hash QCryptographicHash::hash( QString::fromUtf8(argv[1]).toUtf8(), QCryptographicHash::Sha256); qDebug() hash.toHex(); return 0; }網(wǎng)上那些“在線MD5/SHA256生成”也能用但如果處理的密碼比較敏感建議本地跑這個(gè)工具別把明文密碼往網(wǎng)上貼。4.2 密碼加鹽不要直接哈希明文直接SHA256有一個(gè)很出名的問題如果用戶的密碼是弱密碼比如“123456”攻擊者可以拿一份彩虹表直接反查出原文。解決辦法是加鹽在密碼明文后面拼接一個(gè)隨機(jī)字符串再一起做哈希。加鹽這個(gè)知識(shí)點(diǎn)很多Qt教程不會(huì)講但我覺得這種安全細(xì)節(jié)必須在一開始就養(yǎng)成習(xí)慣。實(shí)現(xiàn)很簡單QString salt qT_salt_x9k2; // 每個(gè)用戶的隨機(jī)鹽 QByteArray hash QCryptographicHash::hash( (password salt).toUtf8(), QCryptographicHash::Sha256).toHex();注意鹽不能是全局固定的一個(gè)字符串——那樣效果跟不加鹽沒區(qū)別。好的做法是每個(gè)用戶一個(gè)隨機(jī)鹽注冊時(shí)生成并存儲(chǔ)登錄時(shí)取出該用戶的鹽再算哈希比對。4.3 登錄驗(yàn)證支持后端接口后端驗(yàn)證本質(zhì)上就是發(fā)HTTP請求。Qt里最簡單的方案是QNetworkAccessManager配合QNetworkRequest和QNetworkReply做異步請求。這里要特別提醒別在登錄按鈕的槽函數(shù)里寫QNetworkReply::waitForReadyRead()之類的阻塞調(diào)用那會(huì)導(dǎo)致界面卡死用戶體驗(yàn)極差。應(yīng)該用異步信號(hào)槽。void LoginDialog::onLoginClicked() { m_loginBtn-setEnabled(false); m_loginBtn-setText(登錄中...); QNetworkAccessManager *manager new QNetworkAccessManager(this); connect(manager, QNetworkAccessManager::finished, this, LoginDialog::onLoginReplyFinished); QNetworkRequest request(QUrl(http://127.0.0.1:8080/api/login)); request.setHeader(QNetworkRequest::ContentTypeHeader, application/json); QJsonObject obj; obj[username] m_userEdit-text(); obj[password] m_passEdit-text(); QNetworkReply *reply manager-post(request, QJsonDocument(obj).toJson()); connect(this, QDialog::rejected, reply, QNetworkReply::abort); }槽函數(shù)收到finished信號(hào)后檢查HTTP狀態(tài)碼、解析返回JSON判斷是否驗(yàn)證成功。注意一個(gè)問題如果用戶點(diǎn)擊“取消”或者關(guān)窗口網(wǎng)絡(luò)請求還在飛應(yīng)該在LoginDialog關(guān)閉時(shí)abort掉正在進(jìn)行的reply不然會(huì)出現(xiàn)dialog銷毀后回調(diào)還在執(zhí)行的情況輕則警告重則崩潰。4.4 失敗次數(shù)和鎖定策略登錄驗(yàn)證不能無限次重試否則等于沒有登錄。常用做法是連續(xù)輸錯(cuò)5次鎖定賬號(hào)或退出程序間隔30秒后才能重新嘗試。實(shí)現(xiàn)起來很簡單在LoginDialog里加兩個(gè)成員變量int m_failedTimes 0; QTimer *m_lockTimer nullptr;每失敗一次m_failedTimes加1超過閾值就禁用登錄按鈕啟動(dòng)一個(gè)單次定時(shí)器m_failedTimes; if (m_failedTimes 5) { m_loginBtn-setEnabled(false); m_lockTimer new QTimer(this); m_lockTimer-setSingleShot(true); connect(m_lockTimer, QTimer::timeout, this, [this]() { m_loginBtn-setEnabled(true); m_failedTimes 0; }); m_lockTimer-start(30000); }這個(gè)策略在不同系統(tǒng)里可能有差異但思路都一樣。別把鎖定時(shí)間做太長內(nèi)部工具鎖個(gè)30秒提醒一下就行否則使用者會(huì)懷疑程序崩了。4.5 記住密碼的存儲(chǔ)策略“記住密碼”這個(gè)功能說起來容易做起來有一堆講究。我的建議是勾選記住密碼時(shí)只記住用戶名密碼可以選擇記住但要用簡單混淆或系統(tǒng)密鑰存儲(chǔ)。對于純本地工具、沒有絕對安全要求的環(huán)境里把密碼明文寫到ini也能跑但最好做一層編碼。比如QString encoded QString(password.toUtf8().toBase64());這樣做不是加密只是不讓別人一眼看到明文。真正要安全的話應(yīng)該用系統(tǒng)提供的憑據(jù)存儲(chǔ)比如Windows的Credential Manager但那個(gè)集成成本有點(diǎn)高一般項(xiàng)目不需要。實(shí)現(xiàn)邏輯登錄成功之后如果記住密碼選中就把用戶名密碼寫進(jìn)QSettings下次啟動(dòng)時(shí)LoginDialog構(gòu)造函數(shù)里讀出來自動(dòng)填入輸入框。5. 登錄成功跳轉(zhuǎn)主程序窗口切換的完整流程5.1 信號(hào)槽通知主窗口還是main函數(shù)控制前面我在main函數(shù)里給出了最簡單方案exec()返回Accepted后創(chuàng)建主窗口。這個(gè)方案對于單窗口程序完全夠用。但也有兩種例外。第一種主窗口依賴登錄界面的數(shù)據(jù)用戶名、角色、權(quán)限而創(chuàng)建主窗口的代碼在main里這時(shí)先創(chuàng)建一個(gè)空的MainWindow等登錄成功后再調(diào)用它的initWithUser(user)方法填充數(shù)據(jù)——這個(gè)我剛才在代碼里已經(jīng)演示了。第二種你的程序是托盤程序或沒有主界面的后臺(tái)程序登錄成功之后不進(jìn)入主窗口而是啟動(dòng)后臺(tái)循環(huán)這種情況下就需要在main里判斷角色再?zèng)Q定執(zhí)行分支。這里有個(gè)小小的設(shè)計(jì)建議不要在MainWindow的構(gòu)造函數(shù)里做需要登錄信息的初始化因?yàn)闃?gòu)造函數(shù)里拿不到應(yīng)該提供一個(gè)顯式的方法比如void MainWindow::initForUser(const QString username)在登錄成功后調(diào)用。這樣MainWindow可以復(fù)用登錄模塊也可以復(fù)用。5.2 登錄成功后登錄窗口怎么收場登錄成功后登錄窗口的正確收場方式是調(diào)用accept()而不是close()更不是deleteLater()。原因上面提過accept()會(huì)讓exec()返回Accepted值main函數(shù)據(jù)此判斷繼續(xù)執(zhí)行close()在QDialog里默認(rèn)行為也是觸發(fā)reject()不過語義不清晰直接deleteLater()更是危險(xiǎn)——exec()的事件循環(huán)還沒結(jié)束刪除窗口會(huì)把事件循環(huán)搞亂。如果你不是在main里用exec()而是通過信號(hào)槽通知主窗口顯示那么登錄窗口的成功收場應(yīng)該是hide()留在內(nèi)存里萬一后續(xù)要重新登錄呢主窗口關(guān)閉時(shí)再統(tǒng)一釋放。5.3 登錄信息怎么傳給主窗口這里不推薦搞一個(gè)全局變量存用戶名。理由很簡單將來你的程序要加多用戶切換、要支持不同角色顯示不同菜單全局變量就不夠用了。更好的方案是定義一個(gè)UserInfo結(jié)構(gòu)體或類登錄成功后LoginDialog持有一個(gè)UserInfo對象主窗口通過LoginDialog::getUserInfo()獲取struct UserInfo { QString username; QString role; QString displayName; QString token; // 從服務(wù)器拿到的會(huì)話token };一個(gè)實(shí)用的小經(jīng)驗(yàn)UserInfo不要用QStringList或QVariantMap散裝存因?yàn)楦男枨髸r(shí)你根本不知道哪里用到了哪個(gè)字段。定義好結(jié)構(gòu)體主窗口拿到之后可以放心傳參、存儲(chǔ)、擴(kuò)展。5.4 超時(shí)自動(dòng)鎖屏進(jìn)階如果程序是給公司內(nèi)部用的可能會(huì)有這樣的需求用戶離開工位幾分鐘程序自動(dòng)鎖屏回來要重新輸密碼。實(shí)現(xiàn)思路是安裝一個(gè)全局事件過濾器監(jiān)控鼠標(biāo)鍵盤活動(dòng)長時(shí)間無操作就彈出一個(gè)全屏遮罩的鎖屏對話框用戶重新輸入密碼才能繼續(xù)。這個(gè)功能我實(shí)現(xiàn)過一次代碼量比較大但核心就兩件事事件過濾器和鎖屏Dialog。如果你已經(jīng)有登錄Dialog鎖屏Dialog可以復(fù)用它的驗(yàn)證邏輯只換一個(gè)界面標(biāo)題。6. 常見問題和避坑經(jīng)驗(yàn)6.1 Qt Creator里serialport模塊找不到很多讀者搜索Qt時(shí)會(huì)看到“unknown module in qt: serialport”的報(bào)錯(cuò)。這個(gè)跟登錄界面本身沒直接關(guān)系但波及面很廣我簡單說一下排查思路Qt SerialPort模塊不是默認(rèn)安裝的你用在線安裝器或離線安裝包裝Qt時(shí)如果沒勾選對應(yīng)模塊pro里寫QT serialport就會(huì)報(bào)Unknown module。解決方案是去Qt Maintenance Tool里勾選對應(yīng)模塊或者重新下載安裝包勾選SerialPort模塊。順帶說一句如果你用的是5.15.2離線安裝包安裝時(shí)一定要把該勾的組件都勾上很多坑其實(shí)是安裝時(shí)漏了組件。6.2 登錄成功后程序退出的坑這個(gè)現(xiàn)象非常經(jīng)典代碼按照教程寫了登錄按鈕執(zhí)行了LoginDialog沒了MainWindow也show出來了但整個(gè)程序立刻退出。原因就是你show了主窗口但主窗口是一個(gè)局部變量作用域結(jié)束后被銷毀程序所有窗口都關(guān)完了事件循環(huán)結(jié)束進(jìn)程退出。解決方案很簡單讓MainWindow的生命周期等于程序的生命周期。要么在main里以棧對象存在直到a.exec()結(jié)束要么new出來并設(shè)置為全局/成員不手動(dòng)delete。MainWindow w; w.show(); return a.exec(); // w的生命周期覆蓋整個(gè)事件循環(huán)6.3 中文亂碼問題Qt 5.15默認(rèn)用UTF-8只要你的源碼文件保存為UTF-8編碼中文字符串一般沒問題。但如果你的項(xiàng)目是從老版本Qt遷移過來的或者某些同事的IDE默認(rèn)GBK編碼源碼里的中文注釋和字符串可能亂成一片。排查手段先統(tǒng)一編碼。在pro文件里添加QMAKE_CXXFLAGS /utf-8MSVC編譯器強(qiáng)制編譯器按UTF-8解析源文件。這是MSVC下最實(shí)用的一個(gè)開關(guān)。6.4 打包發(fā)布時(shí)缺DLL登錄界面做完了程序功能也好了結(jié)果要把exe發(fā)給別人時(shí)雙擊運(yùn)行提示找不到“Qt5Core.dll”、“Qt5Widgets.dll”。解決辦法有兩條路一是用windeployqt工具自動(dòng)拷貝依賴庫。打開命令提示符cd到exe所在目錄執(zhí)行C:\Qt\5.15.2\msvc2019_64\bin\windeployqt.exe 你的程序名.exe它會(huì)自動(dòng)把所需的Qt DLL、平臺(tái)插件復(fù)制到exe目錄下。注意你的exe必須是Release版本Debug版本依賴的DLL體積大也不必發(fā)布。二是用打包工具做成安裝包比如Inno Setup或官方維護(hù)的Qt Installer Framework。我個(gè)人是先用windeployqt做目錄再打包流程穩(wěn)定。6.5 登錄框回車沒反應(yīng)前面講了setDefault(true)這里再補(bǔ)充如果你用QDialog自己重寫了keyPressEvent注意要調(diào)用父類實(shí)現(xiàn)別把默認(rèn)回車邏輯覆蓋掉了。void LoginDialog::keyPressEvent(QKeyEvent *event) { if (event-key() Qt::Key_Return || event-key() Qt::Key_Enter) { onLoginClicked(); return; } QDialog::keyPressEvent(event); }注意Enter和Return是兩個(gè)不同的鍵大鍵盤的回車是Key_Return小鍵盤的Enter是Key_Enter。判斷條件別漏了其中任意一個(gè)。6.6 Qt 5.15.2 和 5.15.3 庫混用崩潰有的讀者會(huì)遇到“cannot mix incompatible Qt library (5.15.3) with this library (5.15.2)”這種崩潰信息。這通常是你的程序編譯時(shí)用的Qt庫版本和運(yùn)行時(shí)加載的Qt庫版本不一致。比如你本機(jī)裝了多個(gè)Qt版本編譯用的5.15.2運(yùn)行時(shí)PATH里卻先找到了5.15.3的dll。排查辦法把exe目錄里的Qt DLL版本和編譯器的版本對齊或者用windeployqt重新部署。同時(shí)檢查環(huán)境變量PATH里有沒有別的Qt目錄混進(jìn)去了。這種崩潰特別隱蔽經(jīng)常是裝完新版本Qt后突然出現(xiàn)的。7. 最后給點(diǎn)小技巧做完這個(gè)登錄界面之后建議你把登錄模塊獨(dú)立編譯成一個(gè)子項(xiàng)目或者靜態(tài)庫。這樣下次新項(xiàng)目要加登錄功能直接把模塊引用過去換一下界面標(biāo)題就行不用重新寫一遍驗(yàn)證和跳轉(zhuǎn)邏輯。我自己就是第一版做完后抽了LoginDialog和AuthManager兩個(gè)類后面三個(gè)項(xiàng)目都直接復(fù)用改改密鑰和數(shù)據(jù)庫配置就好。另外提醒一個(gè)安全習(xí)慣不管用本地配置文件還是數(shù)據(jù)庫都不要放棄對密碼的哈希處理。很多工具軟件覺得“反正局域網(wǎng)用、沒什么機(jī)密”結(jié)果內(nèi)網(wǎng)被人摸進(jìn)來配置文件一打開全是明文賬號(hào)密碼那就很難看了。加鹽SHA256并不是多復(fù)雜的事幾十行代碼換來的是整個(gè)系統(tǒng)的底線安全。如果你把登錄界面做出來了但運(yùn)行過程中遇到窗口閃現(xiàn)、登錄狀態(tài)丟失、按鈕焦點(diǎn)錯(cuò)亂這類問題回頭檢查一下布局管理的使用方式——大多數(shù)都是生命周期和布局嵌套的問題跟登錄功能本身沒關(guān)系。把代碼理順了把模塊邊界切好了登錄功能自然是穩(wěn)穩(wěn)當(dāng)當(dāng)?shù)摹?