DevExtreme初级入门教程（Angular篇）：应用程序模板（Part 5）——验证 & 创建一个空应用

验证

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 | 下载试用

DevExpress技术交流群4：715863792      欢迎一起进群讨论