彩票走势图

B/S端界面控件DevExtreme Angular应用程序模板 – 新的身份验证UI

翻译|行业资讯|编辑:龚雪|2022-06-16 10:28:34.757|阅读 75 次

概述:本文主要讲解B/S端界面控件DevExtreme Angular应用程序模板新的身份验证UI,欢迎下载最新版体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

DevExtreme Angular 应用程序模板附带了新的用户身份验证表单和客户端API,因此您可以轻松地将这些新表单与后端集成。

DevExtreme v21.2正式版下载

Angular身份验证表单

正如您在下面看到的,在 Angular 应用程序模板中添加了新的登录、注册、重置和更改密码表单,这些表单的设计方式符合当今最常见的基于 Web 的密码身份验证模式/工作流程。 当然,您可以轻松自定义这些预构建的身份验证表单,以更好地满足组织需求/要求。

B/S端界面控件DevExtreme Angular应用程序模板 – 新的身份验证UI
后端集成

除了身份验证表单之外,我们还包括一个简单的客户端 API,旨在处理身份验证表单提交事件。 一旦用户提交表单,表单数据就会被自动收集并传递给相应的提交处理程序。 您可以对内置处理程序进行细微更改,以将相应的 HTTP 请求发送到您的身份验证后端 API——无论使用何种后端技术。 为了您的方便,我们将所有这些处理程序放在一个文件中。

访问经过身份验证的用户数据

Angular 应用程序模板现在包含一个身份验证服务,此服务使您可以从应用程序的任何部分访问经过身份验证的用户数据。此外,此服务允许您向后端发送不同的身份验证相关命令(例如“登录”、“注销”等),下面的代码有助于演示此功能:

export class MyComponent implements OnInit {
currentUser = {};
userMenuItems = [
...,
{
text: 'Logout',
onClick: () => {
this.authService.logOut();
}
}];

constructor(private authService: AuthService, ...) { }

ngOnInit() {
this.authService.getUser().then((user) => this.currentUser = user);
}
}

您可以在找到完整的 AuthService 使用示例。

试试看

要直接探索这些功能,您可以查看或下载演示应用程序和相关的源代码:

  • 一个演示应用程序:
  • 源代码:

DevExtreme | 下载试用

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。


DevExpress技术交流群6:600715373      欢迎一起进群讨论

DevExpress企业定制服务

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP