0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

AWTK 開源串口屏開發(fā)(9) - 用戶和權(quán)限管理

ZLG致遠電子 ? 2024-02-19 12:10 ? 次閱讀

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

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


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 格式的文件存儲用戶名和密碼,每行一個用戶,每行的格式如下:

  • 用戶名??梢允褂弥形摹?/li>
  • 角色。用來做實際的權(quán)限控制,怎么定義就怎么用。比如:0表示管理員,1 表操作員,2 表示維護員。
  • 密碼。使用 sha256 加密。
  • 備注??梢允褂弥形?。

在后面的數(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 參考界面

db7aa518-cedc-11ee-9118-92fbcf53809c.png

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

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

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

username 登錄的用戶名。

userrole 登錄的用戶角色。

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

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 一定要設(shè)置為 false,否則不能綁定 enable 屬性

v-data:enable

data:enable {userrole==0}

當前角色為管理員時,才啟用本按鈕

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

綁定屬性

綁定規(guī)則

說明

v-on:click

{do_something, Args=xxx, AutoDisable=false}

AutoDisable 一定要設(shè)置為 false,否則不能綁定 enable 屬性

v-data:enable

data:enable {userrole==0}

當前角色為管理員時,才啟用本按鈕

4.4 demo 參考界面

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

db7ed020-cedc-11ee-9118-92fbcf53809c.png

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

dbc54ee2-cedc-11ee-9118-92fbcf53809c.png

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 參考界面

dbd86158-cedc-11ee-9118-92fbcf53809c.png

6. 用戶管理

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

6.1 用戶管理命令

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

add 添加用戶。

remove 刪除用戶。

edit 編輯用戶。

save 保存用戶。

reload 重新加載用戶。

set_selected 設(shè)置選中的用戶。

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 一定要設(shè)置為 false,否則不能綁定 enable 屬性。

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

綁定屬性

綁定規(guī)則

說明

v-data:enable

{selected_index!=0}

當前選中的用戶不是管理員時,啟用本按鈕。

6.4 demo 參考界面

dbe63c1a-cedc-11ee-9118-92fbcf53809c.png

7. 創(chuàng)建用戶

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

通過 new 參數(shù)可以設(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 參考界面

dbf98a86-cedc-11ee-9118-92fbcf53809c.png

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 表示關(guān)閉窗口。

8.4 demo 參考界面

dc0aca4e-cedc-11ee-9118-92fbcf53809c.png

9. 注意

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

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

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 開源
    +關(guān)注

    關(guān)注

    3

    文章

    3380

    瀏覽量

    42601
  • 串口屏
    +關(guān)注

    關(guān)注

    8

    文章

    540

    瀏覽量

    37496
  • awtk
    +關(guān)注

    關(guān)注

    0

    文章

    45

    瀏覽量

    237
收藏 人收藏

    評論

    相關(guān)推薦

    AWTK最新動態(tài)】AWTK 1.8版本發(fā)布

    是什么AWTK全稱ToolkitAnyWhere,是ZLG開發(fā)開源GUI引擎,旨在為嵌入式系統(tǒng)、WEB、各種小程序、手機和PC打造的通用GUI引擎,為用戶提供一
    的頭像 發(fā)表于 08-30 12:48 ?462次閱讀
    【<b class='flag-5'>AWTK</b>最新動態(tài)】<b class='flag-5'>AWTK</b> 1.8版本發(fā)布

    AWTK 開源串口開發(fā)(18) - 用 C 語言自定義命令

    如果AWTK-HMI內(nèi)置模型無法滿足需求,可以使用C語言來擴展默認模型。本文通過一個簡單的例子,介紹一下用C語言擴展默認模型的方法。AWTK-HMI內(nèi)置了不少模型,利用這些模型開發(fā)應(yīng)用程序,不需要
    的頭像 發(fā)表于 05-11 08:24 ?467次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(18) - 用 C 語言自定義命令

    AWTK 開源串口開發(fā)(17) - 通過 MODBUS 訪問數(shù)組數(shù)據(jù)

    AWTK串口中,內(nèi)置MODBUS客戶端通道模型,不用編寫代碼即可實現(xiàn)在ListView中顯示遠程設(shè)備上的數(shù)組數(shù)據(jù)。1.功能不用編寫代碼,實現(xiàn)對遠程設(shè)備上數(shù)組數(shù)據(jù)的顯示。2.創(chuàng)建項目從模板創(chuàng)建項目
    的頭像 發(fā)表于 04-29 08:25 ?369次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(17) - 通過 MODBUS 訪問數(shù)組數(shù)據(jù)

    【插針機HMI開發(fā)】用AWTK開發(fā)人機界面

    插針機中有兩個重要的部件HMI和PLC,HMI提供用戶操作和界面顯示,而PLC則控制電機的運動邏輯。致遠電子的ZTP800和AWTK-HMI解決方案可以快速開發(fā)插針機或其他設(shè)備的HMI界面。視頻演示
    的頭像 發(fā)表于 04-19 08:23 ?586次閱讀
    【插針機HMI<b class='flag-5'>開發(fā)</b>】用<b class='flag-5'>AWTK</b><b class='flag-5'>開發(fā)</b>人機界面

    AWTK 開源串口開發(fā)(16) - 提供 MODBUS 服務(wù)

    AWTK串口內(nèi)置MODBUS從站模型,不用編寫一行代碼即可讓串口提供MODBUS服務(wù),讓遠程設(shè)備通過MODBUS協(xié)議訪問
    的頭像 發(fā)表于 04-13 08:24 ?472次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(16) - 提供 MODBUS 服務(wù)

    AWTK 開源串口開發(fā)(15) - 通過 MODBUS 訪問遠程數(shù)據(jù)

    AWTK串口內(nèi)置MODBUSClient模型,支持用MODBUS協(xié)議從遠程設(shè)備獲取數(shù)據(jù)。不用編寫代碼即可實現(xiàn)對遠程設(shè)備數(shù)據(jù)的顯示和修改。在AWTK
    的頭像 發(fā)表于 03-30 08:23 ?434次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(15) - 通過 MODBUS 訪問遠程數(shù)據(jù)

    AWTK 開源串口開發(fā)(14) - 界面重用

    AWTK串口支持同一個界面綁定不同的數(shù)據(jù),本文以家居控制為例,介紹一下界面重用的方法。在家居控制應(yīng)用中,我們演示了空調(diào)和咖啡機界面?,F(xiàn)在我們來想一想,如果有多個空調(diào)怎么辦呢?當然最直觀的方法,就是
    的頭像 發(fā)表于 03-23 08:23 ?386次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(14) - 界面重用

    AWTK 開源串口開發(fā)(13) - 計算器應(yīng)用

    計算器是一個常見的應(yīng)用程序,在AWTK串口中,利用fscript表達式計算函數(shù),無需編寫一行傳統(tǒng)的代碼,即可實現(xiàn)一個簡單的計算器應(yīng)用程序。1.功能計算器是一個很常見的應(yīng)用,比如在電子秤中,可能
    的頭像 發(fā)表于 03-16 08:23 ?5574次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(13) - 計算器應(yīng)用

    AWTK 開源串口開發(fā)(12) - 記事本應(yīng)用

    傳統(tǒng)的的串口中,開發(fā)一個記事本應(yīng)用,即使可能,也是非常麻煩的事情。在AWTK串口中,內(nèi)置文件
    的頭像 發(fā)表于 03-09 08:23 ?373次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(12) - 記事本應(yīng)用

    AWTK 開源串口開發(fā)(11) - 天氣預(yù)報

    AWTK串口內(nèi)置了XML/JSON/INI等各種數(shù)據(jù)文件的模型,并支持用HTTP/HTTPS從網(wǎng)絡(luò)獲取數(shù)據(jù)。不用編寫一行代碼,即可實現(xiàn)天氣預(yù)報、股票行情、航班查詢和快遞查詢等功能。天氣預(yù)報是一個很
    的頭像 發(fā)表于 03-05 08:24 ?418次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(11) - 天氣預(yù)報

    AWTK 開源串口開發(fā)(10) - 告警信息的高級用法

    告警信息是串口常用的功能,之前我們介紹了告警信息的基本用法,實現(xiàn)了告警信息的顯示和管理。本文介紹一下實現(xiàn)查詢告警信息和查看告警信息詳情的方法。1.功能之前我們介紹了告警信息的基本用法,實現(xiàn)了告警
    的頭像 發(fā)表于 02-24 08:23 ?339次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(10) - 告警信息的高級用法

    AWTK開源智能串口方案】設(shè)計UI界面并上傳到串口

    本篇文章將介紹如何使用AWStudio設(shè)計串口端的UI界面和添加綁定規(guī)則,以及怎么將資源文件上傳到串口端。引言:AWTK-HMI是基于
    的頭像 發(fā)表于 02-22 08:24 ?765次閱讀
    【<b class='flag-5'>AWTK</b><b class='flag-5'>開源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】設(shè)計UI界面并上傳到<b class='flag-5'>串口</b><b class='flag-5'>屏</b>

    AWTK開源智能串口方案】MCU SDK使用與編譯運行

    代碼智能串口方案,本系列文章介紹如何從零開發(fā)HMI程序,包括搭建開發(fā)環(huán)境、創(chuàng)建HMI運行時工程、修改應(yīng)用界面以及開發(fā)MCU程序。MCU端簡
    的頭像 發(fā)表于 02-19 12:11 ?1261次閱讀
    【<b class='flag-5'>AWTK</b><b class='flag-5'>開源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】MCU SDK使用與編譯運行

    AWTK 開源串口開發(fā)(7) - 屏幕保護

    現(xiàn)在的屏幕其實并不需要屏幕保護程序來“保護”,不過屏幕保護程序會衍生一些其它用途。比如,保護隱私、數(shù)據(jù)安全和顯示廣告等等。本文介紹一下在AWTK串口中,實現(xiàn)屏幕保護程序的方法。現(xiàn)代屏幕其實并不需要
    的頭像 發(fā)表于 01-20 08:24 ?364次閱讀
    <b class='flag-5'>AWTK</b> <b class='flag-5'>開源</b><b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>開發(fā)</b>(7) - 屏幕保護

    AWTK開源智能串口方案】HMI端程序移植編譯及運行

    本篇文章介紹一下AWTK開源智能串口方案的串口端(即HMI端)的編譯運行步驟,并介紹如何將H
    的頭像 發(fā)表于 01-18 08:24 ?973次閱讀
    【<b class='flag-5'>AWTK</b><b class='flag-5'>開源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】HMI端程序移植編譯及運行