在前后端分离的架构中，前端和后端之间进行交互需要使用HTTP协议。而HTTP是无状态的，这就需要使用Token来保证请求的安全性。本文将介绍如何在Angular 8.x中实现httpClient加token认证和登出操作。
环境要求
在开始本教程之前，您需要确保具备以下条件：
- 已安装Angular CLI
- 已创建一个空的Angular项目
添加认证拦截器
在Angular中，只需要在http请求中添加Authorization头，就可以进行token认证。而我们可以通过一个http拦截器来实现自动添加Authorization头的功能。
在src/app目录下，创建一个名为auth-interceptor.ts的文件，并添加以下代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------------ ------------ ------------ --------- - ---- -----------------------
------ - ----------- ---------- - ---- -------
------ - ---------- - ---- -----------------
------ - ----------- - ---- -----------------
-------------
------ ----- --------------- ---------- --------------- -
------------------- ----- ------------ --
-------------- ----------------- ----- ------------- -------------------------- -
----- ----- - ---------------------
-- ------- -
--- - -----------
-------- -------------------------------- ------- ----------
---
-
------ ----------------------
---------------- -- -
-- ---- ---------- ----------------- -- ---------- --- ---- -
-- -------- -- ----- ----
-
------ ----------------
--
--
-
-首先我们需要引入Angular中的HTTP拦截器相关的依赖项。然后，我们创建一个名为AuthInterceptor的类，并实现HttpInterceptor接口。在这个类内部，我们可以使用auth服务获取当前的token，并将Authorization头添加到所有http请求中。
另外，我们还可以处理所有错误请求。如果当前的请求是一个未授权的请求(即返回状态码为401)，我们可以通过跳转到登录页面来实现自动登出。
注册认证拦截器
在app.module.ts中注册认证拦截器。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ---------------------
-----------
-------- --------------- ------------------
------------- ---------------
---------- -
-
-------- ------------------
--------- ----------------
------ ----
-
--
---------- --------------
--
------ ----- --------- --上面的代码中，我们将AuthInterceptor拦截器添加到了HTTP_INTERCEPTORS中，这样它将被应用于所有的http请求之中。
实现AuthService
在 src/app 目录下创建 auth.service.ts 文件, 并添加以下代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------------- ----------- ------ --
------ ----- ----------- -
----------- ------ -
------ ------------------------------
-
--------------- -------- ---- -
----------------------------- -------
-
-------------- ---- -
---------------------------------
-
------------- ------- -
------ ------------------
-
-上面代码是一个 Auth Service，用于实现 token 相关的功能。
登录
在登录时，我们需要向后端发送请求获取到token，并将其存储到本地缓存中。要实现这个功能，我们首先需要创建一个名为LoginComponent的组件。
在src/app下创建名为login的文件夹，然后在其中创建一个名为login.component.ts的文件，并添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------ - ----------- - ---- ------------------
------------
------------ ------------------------
--
------ ----- -------------- -
--------- -------
--------- -------
------------------- ------- ------- ------- ----- ------------ --
--------- ---- -
-- -------------
---------------------------- -- ---------------------
-------------------------------- -- -----
-
-在login.component.ts中，我们通过引用AuthService服务来实现token获取和存储。在submit方法中，我们放置了用于登录验证的异步操作。如果验证成功，我们使用 Auth.setToken()将token存储到浏览器缓存中，然后重定向到主页。
登出
要实现登出功能，我们需要创建一个名为LogoutComponent的组件。
在src/app下创建名为logout的文件夹，然后在其中创建一个名为logout.component.ts的文件，并添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------ - ----------- - ---- ------------------
------------
--------- --
--
------ ----- --------------- -
------------------- ------- ------- ------- ----- ------------ --
---------- -
------------------------
---------------------------------
-
-在logout.component.ts中，我们在ngOnInit方法中调用了 AuthService.removeToken() 方法清除token，然后重定向到登录页面。
示例代码
你也可以通过以下示例代码快速实现登录和登出的功能:
login.component.html:
-- -------------------- ---- -------
----- --------------------
-----
------ ----------- ---------------------- -----------------------
------
-----
------ --------------- ---------------------- -----------------------
------
------- -----------------------------
-------app-routing.module.ts:
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - --------- - ---- --------------- ------ - ------------- - ---- ------------------------ ------ - -------------- - ---- -------------------------- ------ - --------------- - ---- ---------------------------- ----- ------- ------ - - - ----- -------- ---------- -------------- -- - ----- --------- ---------- --------------- -- - ----- ------- ---------- -------------- ------------ ----------- -- - ----- ----- ----------- ------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- --
app.module.ts:
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ---------------------
------ - ----------- - ---- -----------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
------ - --------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - --------- - ---- ---------------
-----------
-------- --------------- ------------ ----------------- ------------------
------------- -------------- --------------- -------------- -----------------
---------- -
----------
------------
-
-------- ------------------
--------- ----------------
------ ----
-
--
---------- --------------
--
------ ----- --------- --home.component.html:
<h1>Welcome to your app.</h1>
<p>You are logged in with token:<br/> {{ token }}</p>
<button type="button" (click)="logout()">Logout</button>home.component.ts:
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ------------------
------------
------------ -----------------------
--
------ ----- ------------- -
------ -------
------------------- ----- ------------ -
---------- - ---------------------
-
--------- ---- -
------------------------
-
-auth.guard.ts:
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- ----------- - ---- ------------------
------ - ----------- - ---- -----------------
-------------
----------- ------
--
------ ----- --------- ---------- ----------- -
------------------- ------- ------- ------- ----- ------------ --
-------------- ------- -
-- ------------------------ -
------ -----
- ---- -
---------------------------------
------ ------
-
-
-总结
在Angular 8.x中实现httpClient加token认证和登出操作，可以在开发过程中更好地保护用户隐私和数据的安全性。本文通过一个具体的例子，介绍了如何实现这些功能。希望您在开发中有所收获，如有问题欢迎留言探讨。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a800948841e9894765165