平均堆栈：构建具有角和角CLI的应用程序

>本教程在均值堆栈应用程序中通过用户身份验证引导您。我们将使用一个常见的架构：一个角度单页应用程序与node.js，express和mongoDB基于rest api相互作用。

>

密钥身份验证方面：

1. 用户注册。
2. 安全的用户数据存储（密码永远不会直接存储）。
>
3. >用户登录。
4. 会话跨页访问。
5. >受保护页面的访问控件（仅登录用户才能访问）。
> 基于登录状态（例如，显示“登录”或“我的个人资料”按钮）。
均值堆栈身份验证工作流程：

>用户数据（带有哈希密码）位于mongodb中。

> 在Express API中实现了
• crud（创建，读取，更新，删除）函数
Angular App与API相互作用并处理响应。 Express API在注册/登录时生成JSON Web令牌（JWTS），将其发送到Angular App。
• Angular App存储JWT来管理用户会话。 Angular App
验证了受保护视图的JWT有效性。 JWT比cookie优先用于浏览器会话管理； cookies更适合服务器端应用程序。
• >示例应用程序：
• 该代码可在GitHub上获得。 您需要安装node.js和mongoDB（请参阅Windows，Linux和MacOS上的MongoDB文档。
• Angular应用程序包含四个基本页面：
>主页

注册页

登录页面

个人资料页面（仅适用于身份验证的用户）

node.js，express和mongodb rest api最初包括以下路由：

（post）：处理用户注册。

>

（post）：处理用户登录。

（get）：检索个人资料详细信息。

>

设置API：

>使用

>工具（使用

>安装）来创建Express App：>

<code class="language-bash">express -v pug mean-authentication
cd mean-authentication
npm i
npm i pug@latest
npm i mongoose</code>

如原始教程中所述，创建必要的目录结构和文件。 提供了

>，数据库连接（app.js），API路由（api/models/db.js）和初始控制器stubs（api/routes/index.js>和api/controllers/authentication.js）。 带有猫鼬的mongodb架构：api/controllers/profile.js

文件使用mongoose来定义mongodb架构：

api/models/users.js>密码管理（哈希和盐）：

<code class="language-javascript">const mongoose = require('mongoose');
const crypto = require('crypto');
const jwt = require('jsonwebtoken');

// ... (Schema definition and setPassword, validPassword, generateJwt methods as described in the original tutorial)</code>

>

>和

方法使用

>模块在不直接存储密码的情况下安全地处理密码。 setPassword方法使用validPassword软件包来创建JWTS。 crypto passport.js用于身份验证：generateJwt jsonwebtoken安装护照和本地策略：

中的护照：

<code class="language-bash">npm i passport passport-local</code>

updateapi/config/passport.js>初始化护照作为中间件。

>

<code class="language-javascript">// ... (Passport configuration as described in the original tutorial)</code>

> API端点配置：

app.js>使用寄存器，登录和配置文件处理逻辑，完成和

文件，包括使用Passport.js和Express-JWT中间件的JWT生成和身份验证。 使用

。

使用CLI创建Angular应用：api/controllers/authentication.js api/controllers/profile.js /api/profile生成必要的组件（express-jwt>，

，

，

）和服务（

）。 实施

来处理JWT存储，检索，删除，API调用，登录状态检查和用户详细信息检索。

<code class="language-bash">ng new client</code>

连接角组件和API：register login>使用profile来处理API交互作用，在各个组件中实现寄存器和登录表单。 将导航栏更新以根据登录状态动态显示“登录”或用户的名称和配置文件链接。 使用角路线保护（home）保护authentication>路线。 最后，实现配置文件页面以获取和显示从受保护的API路由的用户详细信息。AuthenticationService>

运行应用程序：

>在中配置代理到转发

向Express服务器的请求。 启动Express服务器和Angular App。 测试注册，登录和配置文件访问。 根据需要添加样式（请参阅GitHub存储库以获取样式细节）。 AuthenticationService常见问题（常见问题解答）：/profileFAQS部分

以上是平均堆栈：构建具有角和角CLI的应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！