身份验证是一个非常重要的安全机制，它可以确保只有被授权的用户才能访问某些敏感信息或执行某些操作。在 Angular 中，我们可以使用一些技术来实现身份验证，包括路由守卫、拦截器和服务等。
1. 路由守卫
路由守卫是 Angular 中的一个重要特性，它可以在用户导航到某个路由之前拦截导航，并根据一些条件决定是否允许用户访问该路由。因此，我们可以使用路由守卫来实现身份验证。
1.1. 实现方式
我们可以通过创建一个 AuthGuard 类来实现路由守卫。该类需要实现 CanActivate 接口，并在 canActivate 方法中实现身份验证逻辑。
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ------------ ------ - ---- ------------------ ------ - ----------- - ---- ----------------- ------------- ----------- ------ -- ------ ----- --------- ---------- ----------- - ------------------- ------------ ------------ ------- ------- ------- -- -------------- ------- - -- ------------------------------------- - --------------------------------- ------ ------ - ------ ----- - -展开代码
在上面的代码中，我们注入了 AuthService 和 Router 服务，并在 canActivate 方法中调用 AuthService 的 isAuthenticated 方法来检查用户是否已经登录。如果用户没有登录，则导航到登录页面。
1.2. 使用方式
使用路由守卫非常简单，我们只需要在路由配置中添加 canActivate 属性即可。例如：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - --------- - ---- --------------- ----- ------- ------ - - - ----- --- ---------- -------------- ------------ ----------- -- - ----- -------- ---------- -------------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -展开代码
在上面的代码中，我们在 HomeComponent 的路由配置中添加了 canActivate: [AuthGuard]，这意味着只有在用户已经登录的情况下才能访问该路由。
2. 拦截器
拦截器是 Angular 中的另一个重要特性，它可以拦截 HTTP 请求和响应，并对它们进行处理。因此，我们可以使用拦截器来实现身份验证。
2.1. 实现方式
我们可以通过创建一个 AuthInterceptor 类来实现拦截器。该类需要实现 HttpInterceptor 接口，并在 intercept 方法中实现身份验证逻辑。
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ---------------- ------------ ------------ --------- - ---- ----------------------- ------ - ---------- - ---- ------- ------ - ----------- - ---- ----------------- ------------- ------ ----- --------------- ---------- --------------- - ------------------- ------------ ------------ -- ------------------ ----------------- ----- ------------- -------------------------- - -- ------------------------------------ - ------- - --------------- ----------- - -------------- ------- ------------------------------- - --- - ------ --------------------- - -展开代码
在上面的代码中，我们注入了 AuthService 服务，并在 intercept 方法中调用 AuthService 的 isAuthenticated 方法来检查用户是否已经登录。如果用户已经登录，则在请求头中添加 Authorization 字段，该字段的值为用户的令牌。
2.2. 使用方式
使用拦截器也非常简单，我们只需要在 HttpClientModule 中添加 HTTP_INTERCEPTORS 依赖注入即可。例如：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ----------------- ----------------- - ---- ----------------------- ------ - --------------- - ---- --------------------- ----------- -------- ------------------- ---------- - - -------- ------------------ --------- ---------------- ------ ---- - - -- ------ ----- ---------- - -展开代码
在上面的代码中，我们在 CoreModule 中添加了 HTTP_INTERCEPTORS 依赖注入，并将其值设置为 AuthInterceptor 类。这意味着每次发送 HTTP 请求时，都会先经过 AuthInterceptor 类的 intercept 方法。
3. 服务
除了路由守卫和拦截器之外，我们还可以使用服务来实现身份验证。服务是 Angular 中的一个重要特性，它可以在组件之间共享数据和逻辑。
3.1. 实现方式
我们可以通过创建一个 AuthService 类来实现服务。该类需要实现一些方法，例如 login、logout 和 isAuthenticated。
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------------- ----------- ------ -- ------ ----- ----------- - ------- ------ ------- --------------- ------- --------- -------- ---- - -- -- ---- --------------------- ---------- - --------------------------------- ----------------------------- ------------ - --------- ---- - -- ---------- ---------- - ----- --------------------------------- - ------------------ ------- - -- ------------- ------ -------------------------------- - ----------- ------ - -- ---------- ------ ------------------------------ - -展开代码
在上面的代码中，我们实现了 login、logout、isAuthenticated 和 getToken 方法，这些方法可以用于进行身份验证。
3.2. 使用方式
使用服务也非常简单，我们只需要在组件中注入 AuthService 服务即可。例如：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------------ --------- ------------ --------- - ----- ------------------------ ------ ----------- ---------------------- --------------- ----------------------- ------ --------------- ---------------------- --------------- ----------------------- ------- ---------------------------- ------- - -- ------ ----- -------------- - --------- ------- --------- ------- ------------------- ------------ ------------ -- ----------- ---- - ------------------------------------- --------------- - -展开代码
在上面的代码中，我们在 LoginComponent 中注入了 AuthService 服务，并在 onSubmit 方法中调用 AuthService 的 login 方法来进行身份验证。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67caac81e46428fe9e315025
