引言
在 Angular 应用程序中使用认证和授权极为常见。常见的登录和注册功能使我们的用户能够访问我们的应用程序，并保护我们的敏感数据。 在过去，为了实现这一点，开发人员不得不从头开始编写身份验证和授权代码，这可能会导致冗长而复杂的代码，并且会让开发人员浪费时间。Auth0是一个成熟的第三方认证和授权服务，可以帮助我们在不增加复杂性的情况下轻松地向我们的应用程序添加身份验证和授权。 在本文中，我们将学习如何将 Auth0 集成到 Angular 中，并添加认证和授权。
前置条件
在学习 Auth0 集成到 Angular 之前，您应该具备以下先决条件：
- 良好的 Angular 知识
- Node.js 环境
- Angular CLI 的正确配置
- Auth0 帐号的创建
步骤
在本节中，我们将步骤地介绍如何将 Auth0 集成到 Angular 中。
1. 安装 Auth0
首先，您需要安装认证和授权服务的 Auth0 Angular SDK：
npm install --save @auth0/auth0-angular
2. 配置 Auth0
接下来，您必须在 Auth0 管理仪表板中配置新应用程序，为您的 Angular 应用程序提供授权和身份验证：
1.登录您的 Auth0 帐户。
2.创建一个新的 Auth0 租户或使用现有的租户。
3.导航到您的租户控制台。
4.单击“应用程序”，然后单击“创建应用程序”。
5.选择“单页面应用程序”，然后单击“创建”。
6.为您的应用程序提供一个有意义的名称，并将“跨域设置”保留为默认设置。
7.在“应用程序”选项卡中，找到下面的字段并配置：
回调 URL：http://localhost:4200/ Webpack 地址：http://localhost:4200/
8.点击“保存”。
9.接下来，我们需要将您的权限管理集成到应用程序中。转到您的控制台的“APIs” 选项卡中并单击“创建API”。
10.为您的API提供一个有意义的名称，并在“标识符”字段中输入一个随意的URL（例如：https://mycoolapi.com）
11.单击“创建API”以完成API的创建。
3. 集成 Auth0
现在，我们已经完成了必要的步骤以配置和创建 Auth0 应用程序，可以使用 Angular 应用程序来集成它。
- 首先，在
app.module.ts中导入以下 Auth0 模块：
-- -------------------- ---- ------- ------ - ---------- - ---- ----------------------- ----------- ------------- - ------------ -- -------- - -------------- ----------------- ----------------- -------------------- ------- ---------------------- --------- ------------------------- --------- ------------------------ ------------ ----------------------- --- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
- 然后，我们需要添加以下代码以获得钩子和 AuthService，
- 在
app.component.ts中：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------- - ---- ----------------------- ------ - ---------- - ---- ------- ------------ --------- ----------- --------- - ---- ---------------------------- - ------ ---- ----------- ------- --------------------------- ------------ ---------- -- ----------- - ------------ -------- ------ ------------ ----------- ------- -------------------------------------- ----------- -------------- - -- ------ ----- ------------ - ----- - ------------------------ ------------------ ----- ------------ -- -展开代码
- 最后，在
app-routing.module.ts中，我们需要添加以下路由守卫，以确保登录用户才能访问受保护的路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - ---------------- - ---- ------------------------------ ------ - --------- - ---- --------------- ----- ------- ------ - - - ----- ------- ---------- ------------- -- - ----- ---------- ---------- ----------------- ------------ ----------- -- - ----- ----- ----------- ------ -- -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -展开代码
- 需要创建一个路由守卫，
- 在
auth.guard.ts中：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ------------ ----------------------- -------------------- ------- - ---- ------------------ ------ - ---------- - ---- ------- ------ - ----------- - ---- ----------------------- ------ - --- - ---- ----------------- ------------- ----------- ------ -- ------ ----- --------- ---------- ----------- - ------------------- ----- ------------ -- ------------ ------ ----------------------- ------ --------------------- ------------------ - -------- - --------------- - -------- - ------- - ------- - ------ -------------------------------- ------------ -- - -- ----------- - ------------------------------ - -- -- - -展开代码
完成后，您现在可以在 Angular 应用程序中使用 Auth0 了！
结论
Auth0 提供了一种轻松、简单的方式来集成身份认证和授权到您的 Angular 应用程序中。 在本教程中，我们了解了如何使用 Auth0 SDK 和 Angular CLI 安装和集成 Auth0。我们还使用 app.module.ts 和 app-routing.module.ts 配置了相关的文件，并设置了路由守卫以保护基于角色的访问权限。现在，您可以使用 Auth0 重构您的应用程序并获得更加安全和可扩展的应用程序！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676ffa2ee9a7045d0d78d8f6
