验证
DevExtreme Angular应用程序包括身份验证 UI 和 API,配置客户端路由,以便未经身份验证的用户只能导航到身份验证页面,这些页面允许用户登录、创建新帐户或重置密码。
身份验证页面由 UnauthenticatedContentComponent 呈现。
重要提示:不要依赖客户端路由来保护您的应用程序免受未经授权的访问,始终在后端验证用户凭据。
与后端集成
用于后端请求的存根认证功能在 AuthService 中实现,更新这些函数以向您的后端发出实际请求。
每个函数都返回一个具有以下字段的对象:
获取用户信息
用户信息由同一个 AuthService 提供,您可以使用其 getUser() 方法来访问此信息:
TypeScript
import { Component } from ‘@angular/core‘; import { AuthService } from ‘./shared/services‘; @Component({ // ... }) export class AppComponent { constructor(private authService: AuthService) { } ngOnInit() { this.authService.getUser().then((e) => { if (e.data) { // User is authenticated ... } }); } }
创建一个空的应用程序
要生成没有视图和导航菜单的应用程序,请使用 --empty 标志:
npx devextreme-cli new angular-app app-name --empty
支持Internet Explorer 11
要使生成的应用程序在 Internet Explorer 11 中工作,请执行以下操作:
1. 安装并启用 polyfill
npm install --save classlist.js core-js
code-type active
// ... import ‘core-js/es/array‘; import ‘classlist.js‘; // ...
2. 包含 IE 11 作为受支持的浏览器,打开 .browserslistrc 文件,不要将 IE 11 更改为 IE 11。
3. 修改启动和构建命令
package.json
{ // ... "scripts": { // ... // "start": "ng serve", // "build": "ng build", "start": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng serve --prod", "build": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod", // ... } }
4. 降低目标 ECMAScript 版本
{ // ... // "target": "es2015", "target": "es5", // ... }
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress技术交流群4:715863792 欢迎一起进群讨论
更多DevExpress线上公开课、中文教程资讯请上中文网获取