在应用程序开发过程中，路由保护是非常关键的一个问题，因为在用户登录前，我们希望阻止他们访问特定的页面或组件。在 Angular 中，组件级路由保护是一种实现这种保护的方法，本文将对此进行详细说明。
路由保护类型
在 Angular 中，路由保护一般分为下列两种类型：
- 路由级别保护
用于保护整个路由路径。例如，在用户没有进行身份验证的情况下无法访问某个路由。
- 组件级别保护
用于保护单个组件。例如，在用户未经身份验证之前无法访问某个页面上的特定元素。
在本文中我们将着重讨论组件级别路由保护。
实现方式
实现组件级别路由保护的方法非常简单，只需要在路由定义时为需要保护的组件添加一个 Guard 即可。Guard 是一个可注入服务，它实现了 CanActivate 接口。CanActivate 接口具有一个 canActivate() 方法，这个方法返回一个 boolean 类型的值，表示是否可以激活这个路由。
在 Guard 中，我们可以判断当前用户是否已经登录，如果已登录，则返回 true ，否则返回 false。Guard 会阻止用户访问我们需要保护的组件，如果 Guard 返回 false，则路由器将导航到指定的异常组件。
接下来，我们通过一个简单的例子来演示如何实现组件级别路由保护。
我们有两个组件： Login 和 Dashboard。Dashboard 是需要保护的组件，因此我们需要为它添加一个 Guard。
- 在 app 文件夹中新建一个 auth 文件夹，并在该文件夹中新建一个 AuthGuard.ts 文件，代码如下：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ------ - ---- ------------------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------- ------- - -
------------- -
----- ---------- - -------------------------------------
-- ----------- --- ------- -
------ -----
- ---- -
---------------------------------
------ ------
-
-
-上面的代码中，我们定义了一个 AuthGuard ，并实现了 CanActivate 接口。在 canActivate() 方法中，我们检查 sessionStorage 中是否存在 'isLoggedIn' 字符串，如果存在则表示用户已登录，可以激活路由，返回 true。否则，我们将路由导航到 Login 组件，返回 false。
- 在 app.module.ts 文件中导入 AuthGuard 并将其添加到 Dashboard 路由中
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- ------ - ---- ------------------ ------ - -------------- - ---- -------------------------- ------ - ------------------ - ---- ---------------------------------- ------ - --------- - ---- -------------------- ----- ---------- ------ - - - ----- -------- ---------- -------------- -- - ----- ------------ ---------- ------------------- ------------ ------------ -- ----------- -------- ---------------------------------- -------- -------------- -- ------ ----- ---------------- - -
在上述代码中，我们为 Dashboard 路由添加了一个 AuthGuard 并将其分配给 canActivate 属性。
- 在 Dashboard 组件 HTML 中添加一个受保护的元素
<div *ngIf="isLoggedIn"> <!-- Protected HTML Content --> </div>
在上述代码中，我们使用 *ngIf 来判断用户是否已经登录，如果已经登录，则显示 Dashboard 组件的受保护部分内容。
- 在 Login 组件的控制器中添加一段代码来实现用户登录功能
public login() {
// User Login Logic Here
sessionStorage.setItem('isLoggedIn', 'true');
this.router.navigate(['/dashboard']);
}在上述代码中，我们使用 sessionStorage 来保存当前用户已经登录，并将用户重定向到 Dashboard 组件。
到这里，我们已经完成了组件级别路由保护的实现。
结论
本文中我们讨论了 Angular 中如何实现组件级别路由保护。这是一种保护特定元素或页面的方法。我们在路由定义时为需要保护的组件添加一个 Guard ，可以实现这种保护。Guard 在用户尝试访问组件时检查是否已经登录，在未登录的情况下，阻止用户访问，否则允许用户访问。这种控制可以帮助我们保护某些需要保密的组件或页面等敏感信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670715b9d91dce0dc864cdfb