在开发 Angular 应用时，我们经常需要实现一些路由保卫，比如用户需要登录才能访问某些页面，或者某些页面只能由特定的用户角色访问等。Angular 提供了一些内置的路由保卫，比如 CanActivate、CanDeactivate、CanLoad 等，但是有些时候我们需要更加灵活的路由保卫方案，这时候可以利用 ES2017 的 async/await 特性来自定义路由保卫。
async/await 简介
async/await 是 ES2017 中新增的一种异步编程方式，它可以让我们以同步的方式编写异步代码，使得代码更加清晰易懂。在 Angular 应用中，我们经常需要使用异步操作，比如从服务器获取数据，async/await 可以让我们更加方便地处理这些异步操作。
async 函数是一种特殊的函数，它返回一个 Promise 对象，可以通过 await 关键字来等待异步操作的结果。下面是一个简单的例子：
-- -------------------- ---- ------- ----- -------- ----------- - ----- -------- - ----- ---------------------------------------------- ----- ---- - ----- ---------------- ------ ----- - --------------------- -- - ------------------ ---
在这个例子中，fetchData 函数首先使用 fetch 函数从 GitHub API 获取数据，然后使用 await 关键字等待异步操作的结果，最后返回数据。在调用 fetchData 函数时，我们可以使用 then 方法来获取数据，这里的 then 方法是 Promise 对象的标准方法。
自定义路由保卫
在 Angular 应用中，我们可以通过实现 CanActivate 接口来定义路由保卫。CanActivate 接口有一个 canActivate 方法，该方法返回一个 Observable<boolean> 类型的对象，表示是否可以激活路由。
interface CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
}我们可以在 canActivate 方法中使用 async/await 来处理异步操作，比如从服务器获取用户信息，然后根据用户信息判断是否可以激活路由。下面是一个简单的例子：
-- -------------------- ---- -------
-------------
----- --------- ---------- ----------- -
----- ------------------ ----------------------- ------ --------------------- ---------------- -
----- ---- - ----- ----------------------------------
-- ------ -
------ -----
- ---- -
-------------------------------- - ------------ - ---------- --------- - ---
------ ------
-
-
-在这个例子中，AuthGuard 类实现了 CanActivate 接口，并且在 canActivate 方法中使用 async/await 处理异步操作。getCurrentUser 方法是一个异步方法，它返回一个 Promise<User> 类型的对象，表示当前登录的用户信息。如果用户存在，canActivate 方法返回 true，表示可以激活路由；否则，它会重定向到登录页面，并返回 false，表示不能激活路由。
示例代码
下面是一个完整的示例代码，它演示了如何使用 async/await 自定义路由保卫。该示例中定义了两个路由保卫，分别用于检查用户是否登录和是否有管理员权限。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------ ----------------------- -------------------- ------ - ---- ------------------
------ - ---------- - ---- -------
------ - ----------- - ---- -----------------
-------------
------ ----- --------- ---------- ----------- -
------------------- ------------ ------------ ------- ------- ------- --
----- ------------------ ----------------------- ------ --------------------- ---------------- -
----- ---- - ----- ----------------------------------
-- ------ -
------ -----
- ---- -
-------------------------------- - ------------ - ---------- --------- - ---
------ ------
-
-
-
-------------
------ ----- ---------- ---------- ----------- -
------------------- ------------ ------------ ------- ------- ------- --
----- ------------------ ----------------------- ------ --------------------- ---------------- -
----- ---- - ----- ----------------------------------
-- ----- -- ------------- -
------ -----
- ---- -
----------------------------------------
------ ------
-
-
-在上面的代码中，AuthGuard 和 AdminGuard 类分别实现了 CanActivate 接口，并且在 canActivate 方法中使用 async/await 处理异步操作。getCurrentUser 方法是一个异步方法，它返回一个 Promise<User> 类型的对象，表示当前登录的用户信息。如果用户存在，canActivate 方法返回 true，表示可以激活路由；否则，它会重定向到登录页面或未授权页面，并返回 false，表示不能激活路由。
总结
利用 ES2017 的 async/await 特性可以让我们更加方便地自定义 Angular 路由保卫。通过使用 async/await，我们可以以同步的方式编写异步代码，使得代码更加清晰易懂。在实际开发中，我们可以根据具体的需求，自定义不同的路由保卫，以保障应用的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65efe19e2b3ccec22f925f68