Angular 2身份验证：保护私人内容

>本文演示了如何将身份验证添加到Angular应用程序中，从而保护特定部分免于未经授权的访问。 它是有关用角cli构建CRUD应用程序的Sitepoint Angular 2教程的第5部分

本教程基于先前的部分，但是您可以从

https://www.php.cn/link/92e7f4b2ddddd22224859b3f38aa938aA9378F978F949 开始。 该部分的相关代码被标记为>。part-5

密钥概念：

>本节使用Angular 2和JSON Web令牌（JWTS）进行客户端会话管理。 后端（使用

和json-server）处理身份验证请求并验证令牌。专用的角度服务（body-parser和AuthService）管理身份验证逻辑和会话数据。 ASessionService具有用于用户身份验证的反应性形式，并且路线护罩（）防止未经授权的路由访问。 SignInComponent被配置为在授权标题中包含JWT，以进行安全API通信。 最后，CanActivate中的登录功能允许用户结束会议。ApiService> TodosComponent

设置：

确保您拥有最新的角cli：

（使用

npm install -g @angular/cli@latest

>删除先验版本）。

> npm uninstall -g @angular/cli angular-cli; npm cache clean; npm install -g @angular/cli@latest克隆存储库，结帐第4部分，然后安装依赖项：>

>在

>。

git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-4
npm install
ng serve

上访问该应用程序

http://localhost:4200实现：

本文介绍为身份验证设置后端，将登录方法添加到>，创建身份验证和会话服务，构建

，实现路线守卫并在API请求中发送用户令牌。 ApiService>后端（SignInComponent）处理登录请求，并根据令牌验证保护路线。 包括

>方法。 json-server.js存储会话数据（令牌和用户名）。 ApiService>使用用户输入的反应表单。 AsignIn守卫保护路线，并且SessionService>在请求标题中发送令牌。 登录按钮添加到SignInComponent>。 CanActivateApiService TodosComponent

身份验证策略（JWTS）：>

>该教程采用JWTS用于客户端会话管理，与使用Cookie的服务器端会话管理对比。 JWT是存储客户端的，并根据需要发送到服务器。

>

挑战：

挑战涉及使用sessionStorage或localStorage。

FAQ： >本文以FAQ部分结束，涵盖了Angular 2身份验证，形式验证，实现用户身份验证，角CLI的作用，处理错误，测试以及使用Loginradius CLI。

此修订后的输出可维护原始图像及其格式，同时释义内容以实现伪源性。 核心信息保持不变，但是措辞和句子结构已被更改。

以上是Angular 2身份验证：保护私人内容的详细内容。更多信息请关注PHP中文网其他相关文章！