產(chǎn)品應用 | AWTK 開源串口屏開發(fā)(9) - 用戶和權限管理

在AWTK串口屏中，內(nèi)置用戶管理和權限控制的模型，無需編碼即可實現(xiàn)登錄、登出、修改密碼、權限控制、創(chuàng)建用戶、刪除用戶等功能，本文介紹一下用戶管理和權限控制的基本用法。

用戶管理和權限控制是一個常用的功能。在工業(yè)軟件中，通常將用戶分為幾種不同的角色，每種角色有不同的權限，比如管理員、操作員和維護員等等。在 AWTK 串口屏中，內(nèi)置基本的用戶管理和權限控制功能，可以滿足常見的需求。開發(fā)者不需要編寫代碼，設計好用戶界面，通過數(shù)據(jù)和命令綁定規(guī)則，即可實現(xiàn)用戶和權限管理功能，比如登錄、登出、修改密碼、權限控制、創(chuàng)建用戶、刪除用戶等功能。

本文介紹一下 AWTK 串口屏中的用戶管理和權限控制功能。

1. 出廠默認用戶

在下面的數(shù)據(jù)文件中，可以修改出廠默認的用戶和密碼。密碼使用 sha256 加密，可以使用在線工具生成。https://emn178.github.io/online-tools/sha256.html

design/default/data/user_manager.csv

比如 demo 中的默認用戶是：

admin|0|8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918|管理員（默認密碼：admin)

2. 數(shù)據(jù)文件格式

用 CSV 格式的文件存儲用戶名和密碼，每行一個用戶，每行的格式如下：

用戶名?？梢允褂弥形?。角色。用來做實際的權限控制，怎么定義就怎么用。比如：0?表示管理員，1 表操作員，2 表示維護員。密碼。使用 sha256 加密。備注?？梢允褂弥形摹?/ul>

在后面的數(shù)據(jù)綁定中，name 表示用戶名，role 表示角色，password 表示密碼，memo 表示備注。

3. 用戶登錄

3.1 用戶登錄命令

當啟用用戶管理時，默認模型 (default) 會提供一個 login 的命令。

login 命令依賴兩個屬性：

login_username 登錄的用戶名。

login_password 登錄的密碼。

login 命令需要一個參數(shù)，用來指定登錄成功后跳轉(zhuǎn)的目標頁面。

3.2 數(shù)據(jù)綁定

綁定屬性	綁定規(guī)則	說明
v-data:value	{login_username}	用戶名編輯器
v-data:value	{login_password, Mode=OneWayToModel, ToModel=sha256(value)}	密碼編輯器

Mode=OneWayToModel 表示單向綁定，只能從控件到模型，主要是因為模型里的密碼是加密后的哈希值，不能反向綁定到控件。

表示將控件輸入的數(shù)據(jù)使用 sha256 加密后，再賦值給模型。

3.3 命令綁定

綁定屬性	綁定規(guī)則	說明
v-on:click	{login, Args=home_page}	登錄按鈕的點擊事件。home_page 是登錄成功后跳轉(zhuǎn)的頁面

3.4 demo 參考界面



4. 用戶登錄狀態(tài)

4.1 用戶登錄狀態(tài)

用戶登錄成功后，會在默認模型 (default) 中提供兩個變量：

username 登錄的用戶名。

userrole 登錄的用戶角色。

userrole 是一個整數(shù)，可以通過 userrole 來控制權限。

4.2 數(shù)據(jù)綁定

綁定屬性	綁定規(guī)則	說明
v-data:value	{username}	顯示當前用名
v-data:value	{one_of(‘管理員；工程師；操作員’, userrole)}	顯示當前的角色名

4.3 命令綁定

比如，只用管理員才能訪問的頁面，可以通過下面的命令綁定來實現(xiàn)：

綁定屬性	綁定規(guī)則	說明
v-on:click	{navigate, Args=user_manager, AutoDisable=false}	AutoDisable 一定要設置為 false，否則不能綁定 enable 屬性
v-data:enable	data:enable ? ?{userrole==0}	當前角色為管理員時，才啟用本按鈕

比如，只用管理員執(zhí)行某些命令，可以通過下面的命令綁定來實現(xiàn)：

綁定屬性	綁定規(guī)則	說明
v-on:click	{do_something, Args=xxx, AutoDisable=false}	AutoDisable 一定要設置為 false，否則不能綁定 enable 屬性
v-data:enable	data:enable ? ?{userrole==0}	當前角色為管理員時，才啟用本按鈕

4.4 demo 參考界面

管理員界面，全部功能可用。



工程師界面，部分功能可用。



5. 修改密碼

5.1 修改密碼命令

當啟用用戶管理時，默認模型 (default) 會提供一個 change_password 的命令。change_password 命令依賴兩個屬性：

change_password 修改的密碼。change_confirm_password 確認修改的密碼。

change_password 命令不需要參數(shù)。

5.2 數(shù)據(jù)綁定

綁定屬性	綁定規(guī)則	說明
v-data:value	{change_password, Mode=OneWayToModel, ToModel=sha256(value)}	密碼編輯器
v-data:value	{change_confirm_password, Mode=OneWayToModel, ToModel=sha256(value)}	確認密碼編輯器

5.3 命令綁定

綁定屬性	綁定規(guī)則	說明
v-on:click	{change_password, CloseWindow=true}	確認按鈕的點擊事件。

5.4 demo 參考界面



6. 用戶管理

前面的模型都是默認模型 (default)，用戶管理模型是 user_manager。

6.1 用戶管理命令

當啟用用戶管理時，用戶管理模型 (user_manager) 會提供一些命令。

add 添加用戶。

remove 刪除用戶。

edit 編輯用戶。

save 保存用戶。

reload 重新加載用戶。

set_selected 設置選中的用戶。

6.2 數(shù)據(jù)綁定

綁定屬性	綁定規(guī)則	說明
v-data:value	{selected_index}	選中的用戶索引，在列表項目外使用。
v-data:value	{index}	序數(shù)，在列表項內(nèi)使用。
v-data:value	{item.name}	用戶名，在列表項內(nèi)使用。
v-data:value	{one_of(‘管理員；工程師；操作員’, item.role)}	角色，在列表項內(nèi)使用。
v-data:value	{item.memo}	備注，在列表項內(nèi)使用。

6.3 命令綁定

綁定屬性	綁定規(guī)則	說明
v-on:click	{add}	添加 按鈕的點擊事件。
v-on:click	{edit}	編輯 按鈕的點擊事件。
v-on:click	{save}	保存 按鈕的點擊事件。
v-on:click	{reload}	重新加載 按鈕的點擊事件。
v-on:click	{set_selected}	列表項的點擊事件。
v-on:click	{remove, Args=selected_index, AutoDisable=false}	刪除按鈕的點擊事件。AutoDisable 一定要設置為 false，否則不能綁定 enable 屬性。

為了不讓用戶刪除管理員用戶，可以設置刪除按鈕的 enable 屬性。綁定規(guī)則如下：

綁定屬性	綁定規(guī)則	說明
v-data:enable	{selected_index!=0}	當前選中的用戶不是管理員時，啟用本按鈕。

6.4 demo 參考界面



7. 創(chuàng)建用戶

user_manager 模型提供了一個 add 命令，用來創(chuàng)建用戶。如果支持創(chuàng)建用戶，需要提供一個創(chuàng)建用戶的界面，窗口的名字必須是 user_manager_add。

通過 new 參數(shù)可以設置默認數(shù)據(jù)。比如：

user_manager(new=' |1| | |');

7.1 模型

創(chuàng)建用戶的界面有自己的模型，代表當前創(chuàng)建的用戶。

它具有下面的屬性：

name 表示 username 用戶名。

role 表示 role 角色。

password 表示 password 密碼。

memo 表示 memo 備注。

它還提供了一個確認增加的命令。

add 命令。

7.2 數(shù)據(jù)綁定

綁定屬性	綁定規(guī)則	說明
v-data:value	{name, validator=username}	用戶名編輯器，內(nèi)置數(shù)據(jù)校驗器 username，用于檢查用戶名的有效性（如是否重名）
v-data:value	{role}	角色編輯器
v-data:value	{password, Mode=OneWayToModel, ToModel=sha256(value)}	密碼編輯器
v-data:value	{memo}	備注編輯器

7.3 命令綁定

綁定屬性	綁定規(guī)則	說明
v-on:click	{add, CloseWindow=true}	確認按鈕的點擊事件。

7.4 demo 參考界面



8. 編輯用戶

user_manager 模型提供了一個 edit 命令，用來編輯用戶。如果支持編輯用戶，需要提供一個編輯用戶的界面，窗口的名字必須是 user_manager_edit。

8.1 模型

編輯用戶的界面有自己的模型，代表當前編輯的用戶。它具有下面的屬性：

name 表示 username 用戶名。role 表示 role 角色。memo 表示 memo 備注。

不需要額外的命令。

8.2 數(shù)據(jù)綁定

綁定屬性	綁定規(guī)則	說明
v-data:value	{name}	用戶名編輯器
v-data:value	{role, Trigger=Explicit}	角色編輯器，為了方便取消，采用顯式更新
v-data:value	{memo, Trigger=Explicit}	備注編輯器，為了方便取消，采用顯式更新

8.3 命令綁定

綁定屬性	綁定規(guī)則	說明
v-on:click	{nothing, UpdateModel=true, CloseWindow=true}	確認按鈕的點擊事件。
v-on:click	{nothing, CloseWindow=true}	取消按鈕的點擊事件。

UpdateModel=true 表示更新模型，CloseWindow=true 表示關閉窗口。

8.4 demo 參考界面



9. 注意

本項目并沒有編寫界面相關的代碼，AWStudio 在 src/pages 目錄下生成了一些代碼框架，這些代碼并沒有用到，可以刪除也可以不用管它，但是不能加入編譯。

實際開發(fā)時，可以參考 demo_user_manager 演示項目，在的它 UI 文件上修改。