0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

AWTK 开源串口屏开发(9) - 用户和权限管理

ZLG致远电子 2024-02-19 12:10 次阅读

在AWTK串口屏中,内置用户管理和权限控制的模型,无需编码即可实现登录、登出、修改密码、权限控制、创建用户、删除用户等功能,本文介绍一下用户管理和权限控制的基本用法。

用户管理和权限控制是一个常用的功能。在工业软件中,通常将用户分为几种不同的角色,每种角色有不同的权限,比如管理员、操作员和维护员等等。在 AWTK 串口屏中,内置基本的用户管理和权限控制功能,可以满足常见的需求。开发者不需要编写代码,设计好用户界面,通过数据和命令绑定规则,即可实现用户和权限管理功能,比如登录、登出、修改密码、权限控制、创建用户、删除用户等功能。
db1f0046-cedc-11ee-9118-92fbcf53809c.gif本文介绍一下 AWTK 串口屏中的用户管理和权限控制功能。


1. 出厂默认用户

在下面的数据文件中,可以修改出厂默认的用户和密码。密码使用 sha256 加密,可以使用在线工具生成。https://emn178.github.io/online-tools/sha256.html

design/default/data/user_manager.csv

比如 demo 中的默认用户是:

admin|0|8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918|管理员(默认密码:admin)


2. 数据文件格式

用 CSV 格式的文件存储用户名和密码,每行一个用户,每行的格式如下:

  • 用户名。可以使用中文。
  • 角色。用来做实际的权限控制,怎么定义就怎么用。比如:0表示管理员,1 表操作员,2 表示维护员。
  • 密码。使用 sha256 加密。
  • 备注。可以使用中文。

在后面的数据绑定中,name 表示用户名,role 表示角色,password 表示密码,memo 表示备注。

3. 用户登录

3.1 用户登录命令

当启用用户管理时,默认模型 (default) 会提供一个 login 的命令。

login 命令依赖两个属性:

login_username 登录的用户名。

  • login_password 登录的密码。

login 命令需要一个参数,用来指定登录成功后跳转的目标页面。

3.2 数据绑定

绑定属性

绑定规则

说明

v-data:value

{login_username}

用户名编辑器

v-data:value

{login_password, Mode=OneWayToModel, ToModel=sha256(value)}

密码编辑器

Mode=OneWayToModel 表示单向绑定,只能从控件到模型,主要是因为模型里的密码是加密后的哈希值,不能反向绑定到控件。

表示将控件输入的数据使用 sha256 加密后,再赋值给模型。

3.3 命令绑定

绑定属性

绑定规则

说明

v-on:click

{login, Args=home_page}

登录按钮的点击事件。home_page 是登录成功后跳转的页面

3.4 demo 参考界面

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

4. 用户登录状态

4.1 用户登录状态

用户登录成功后,会在默认模型 (default) 中提供两个变量:

username 登录的用户名。

userrole 登录的用户角色。

userrole 是一个整数,可以通过 userrole 来控制权限。

4.2 数据绑定

绑定属性

绑定规则

说明

v-data:value

{username}

显示当前用名

v-data:value

{one_of(‘管理员;工程师;操作员’, userrole)}

显示当前的角色名

4.3 命令绑定

比如,只用管理员才能访问的页面,可以通过下面的命令绑定来实现:

绑定属性

绑定规则

说明

v-on:click

{navigate, Args=user_manager, AutoDisable=false}

AutoDisable 一定要设置为 false,否则不能绑定 enable 属性

v-data:enable

data:enable {userrole==0}

当前角色为管理员时,才启用本按钮

比如,只用管理员执行某些命令,可以通过下面的命令绑定来实现:

绑定属性

绑定规则

说明

v-on:click

{do_something, Args=xxx, AutoDisable=false}

AutoDisable 一定要设置为 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 命令不需要参数。

5.2 数据绑定

绑定属性

绑定规则

说明

v-data:value

{change_password, Mode=OneWayToModel, ToModel=sha256(value)}

密码编辑器

v-data:value

{change_confirm_password, Mode=OneWayToModel, ToModel=sha256(value)}

确认密码编辑器

5.3 命令绑定

绑定属性

绑定规则

说明

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 设置选中的用户。

6.2 数据绑定

绑定属性

绑定规则

说明

v-data:value

{selected_index}

选中的用户索引,在列表项目外使用。

v-data:value

{index}

序数,在列表项内使用。

v-data:value

{item.name}

用户名,在列表项内使用。

v-data:value

{one_of(‘管理员;工程师;操作员’, item.role)}

角色,在列表项内使用。

v-data:value

{item.memo}

备注,在列表项内使用。

6.3 命令绑定

绑定属性

绑定规则

说明

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 属性。绑定规则如下:

绑定属性

绑定规则

说明

v-data:enable

{selected_index!=0}

当前选中的用户不是管理员时,启用本按钮。

6.4 demo 参考界面

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

7. 创建用户

user_manager 模型提供了一个 add 命令,用来创建用户。如果支持创建用户,需要提供一个创建用户的界面,窗口的名字必须是 user_manager_add。

通过 new 参数可以设置默认数据。比如:

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

7.1 模型

创建用户的界面有自己的模型,代表当前创建的用户。

它具有下面的属性:

name 表示 username 用户名。

role 表示 role 角色。

password 表示 password 密码。

memo 表示 memo 备注。

它还提供了一个确认增加的命令。

add 命令。

7.2 数据绑定

绑定属性

绑定规则

说明

v-data:value

{name, validator=username}

用户名编辑器,内置数据校验器 username,用于检查用户名的有效性(如是否重名)

v-data:value

{role}

角色编辑器

v-data:value

{password, Mode=OneWayToModel, ToModel=sha256(value)}

密码编辑器

v-data:value

{memo}

备注编辑器

7.3 命令绑定

绑定属性

绑定规则

说明

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 数据绑定

绑定属性

绑定规则

说明

v-data:value

{name}

用户名编辑器

v-data:value

{role, Trigger=Explicit}

角色编辑器,为了方便取消,采用显式更新

v-data:value

{memo, Trigger=Explicit}

备注编辑器,为了方便取消,采用显式更新

8.3 命令绑定

绑定属性

绑定规则

说明

v-on:click

{nothing, UpdateModel=true, CloseWindow=true}

确认按钮的点击事件。

v-on:click

{nothing, CloseWindow=true}

取消按钮的点击事件。

UpdateModel=true 表示更新模型,CloseWindow=true 表示关闭窗口。

8.4 demo 参考界面

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

9. 注意

本项目并没有编写界面相关的代码,AWStudio 在 src/pages 目录下生成了一些代码框架,这些代码并没有用到,可以删除也可以不用管它,但是不能加入编译。

实际开发时,可以参考 demo_user_manager 演示项目,在的它 UI 文件上修改。

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 开源
    +关注

    关注

    3

    文章

    3244

    浏览量

    42384
  • 串口屏
    +关注

    关注

    8

    文章

    530

    浏览量

    37309
  • awtk
    +关注

    关注

    0

    文章

    42

    浏览量

    216
收藏 人收藏

    评论

    相关推荐

    AWTK 开源串口开发(16) - 提供 MODBUS 服务

    AWTK串口内置MODBUS从站模型,不用编写一行代码即可让串口提供MODBUS服务,让远程设备通过MODBUS协议访问
    的头像 发表于 04-13 08:24 409次阅读
    <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'>开发</b>(16) - 提供 MODBUS 服务

    AWTK 开源串口开发(15) - 通过 MODBUS 访问远程数据

    AWTK串口内置MODBUSClient模型,支持用MODBUS协议从远程设备获取数据。不用编写代码即可实现对远程设备数据的显示和修改。在AWTK
    的头像 发表于 03-30 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'>开发</b>(15) - 通过 MODBUS 访问远程数据

    AWTK 开源串口开发(14) - 界面重用

    AWTK串口支持同一个界面绑定不同的数据,本文以家居控制为例,介绍一下界面重用的方法。在家居控制应用中,我们演示了空调和咖啡机界面。现在我们来想一想,如果有多个空调怎么办呢?当然最直观的方法,就是
    的头像 发表于 03-23 08:23 330次阅读
    <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'>开发</b>(14) - 界面重用

    AWTK 开源串口开发(13) - 计算器应用

    计算器是一个常见的应用程序,在AWTK串口中,利用fscript表达式计算函数,无需编写一行传统的代码,即可实现一个简单的计算器应用程序。1.功能计算器是一个很常见的应用,比如在电子秤中,可能
    的头像 发表于 03-16 08:23 5273次阅读
    <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'>开发</b>(13) - 计算器应用

    AWTK 开源串口开发(12) - 记事本应用

    传统的的串口中,开发一个记事本应用,即使可能,也是非常麻烦的事情。在AWTK串口中,内置文件
    的头像 发表于 03-09 08:23 323次阅读
    <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'>开发</b>(12) - 记事本应用

    AWTK 开源串口开发(11) - 天气预报

    AWTK串口内置了XML/JSON/INI等各种数据文件的模型,并支持用HTTP/HTTPS从网络获取数据。不用编写一行代码,即可实现天气预报、股票行情、航班查询和快递查询等功能。天气预报是一个很
    的头像 发表于 03-05 08:24 368次阅读
    <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'>开发</b>(11) - 天气预报

    AWTK开源智能串口方案】设计UI界面并上传到串口

    本篇文章将介绍如何使用AWStudio设计串口端的UI界面和添加绑定规则,以及怎么将资源文件上传到串口端。引言:AWTK-HMI是基于
    的头像 发表于 02-22 08:24 663次阅读
    【<b class='flag-5'>AWTK</b><b class='flag-5'>开源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】设计UI界面并上传到<b class='flag-5'>串口</b><b class='flag-5'>屏</b>

    AWTK开源智能串口方案】MCU SDK使用与编译运行

    代码智能串口方案,本系列文章介绍如何从零开发HMI程序,包括搭建开发环境、创建HMI运行时工程、修改应用界面以及开发MCU程序。MCU端简
    的头像 发表于 02-19 12:11 1128次阅读
    【<b class='flag-5'>AWTK</b><b class='flag-5'>开源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】MCU SDK使用与编译运行

    AWTK开源智能串口方案】HMI端程序移植编译及运行

    本篇文章介绍一下AWTK开源智能串口方案的串口端(即HMI端)的编译运行步骤,并介绍如何将H
    的头像 发表于 01-18 08:24 853次阅读
    【<b class='flag-5'>AWTK</b><b class='flag-5'>开源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】HMI端程序移植编译及运行

    AWTK 开源串口开发(6) - 定时器的用法

    定时器是个常用的功能,AWTK串口提供了丰富的定时器函数,用于定时器的启动、停止、暂停、恢复、修改和重置等功能,本文以计时器的例子来介绍定时器的基本用法。定时器也是一个常用的功能,在AWTK
    的头像 发表于 01-13 08:24 535次阅读
    <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'>开发</b>(6) - 定时器的用法

    AWTK 串口开发(5) - MCU端 SDK 用法

    AWTK开源智能串口,不但开放了串口端全部源码,还提供了MCU端SDK,大大加快MCU软件的
    的头像 发表于 01-06 08:24 401次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>开发</b>(5) - MCU端 SDK 用法

    AWTK 串口开发(4) - 数据采集

    数据采用是一个常用的功能。在AWTK开源串口中,内置数据采样模型,只需设计用户界面即可实现采样数据的显示和
    的头像 发表于 12-30 08:24 375次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>开发</b>(4) - 数据采集

    AWTK 串口开发(3) - 告警信息

    告警信息是一个常用的功能。在AWTK开源串口中,内置告警信息模型,只需设计用户界面即可实现告警信息的显示和
    的头像 发表于 12-23 08:24 424次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>串口</b><b class='flag-5'>屏</b><b class='flag-5'>开发</b>(3) - 告警信息

    ​【AWTK开源智能串口方案】方案介绍和工作原理

    本篇文章介绍一下AWTK开源智能串口方案的基本原理和实际使用效果,包括主要特点、应用场景、工作原理以及简单的Demo演示。引言:AWTK-
    的头像 发表于 12-21 08:24 941次阅读
    ​【<b class='flag-5'>AWTK</b><b class='flag-5'>开源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案】方案介绍和工作原理

    AWTK 开源智能串口方案

    AWTK开源智能串口方案发布,旨在解决传统串口诸多痛点,为
    的头像 发表于 12-02 08:24 885次阅读
    <b class='flag-5'>AWTK</b> <b class='flag-5'>开源</b>智能<b class='flag-5'>串口</b><b class='flag-5'>屏</b>方案