Angular 8.x 实现 httpClient 加 token 认证和登出操作完整教程

面试官：小伙子，你的数组去重方式惊艳到我了

在前后端分离的架构中，前端和后端之间进行交互需要使用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:

----------- -- ---- ---------
------ --- ------ -- ---- ----------- -- ----- ------
------- ------------- ----------------------------------

home.component.ts:

------ - --------- - ---- ----------------
------ - ----------- - ---- ------------------

------------
  ------------ -----------------------
--
------ ----- ------------- -
  ------ -------

  ------------------- ----- ------------ -
    ---------- - ---------------------
  -

  --------- ---- -
    ------------------------
  -
-

auth.guard.ts:

------ - ---------- - ---- ----------------
------ - ------- ----------- - ---- ------------------
------ - ----------- - ---- -----------------

-------------
  ----------- ------
--
------ ----- --------- ---------- ----------- -
  ------------------- ------- ------- ------- ----- ------------ --

  -------------- ------- -
    -- ------------------------ -
      ------ -----
    - ---- -
      ---------------------------------
      ------ ------
    -
  -
-

总结

在Angular 8.x中实现httpClient加token认证和登出操作，可以在开发过程中更好地保护用户隐私和数据的安全性。本文通过一个具体的例子，介绍了如何实现这些功能。希望您在开发中有所收获，如有问题欢迎留言探讨。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649a800948841e9894765165

阅读全文

猜你喜欢

  • Fastify 入门：安装和使用指南

    Fastify 是 Node.js 上一个快速且低延迟的 Web 框架，主要用于构建高效的 Restful API。与其他 Node.js 框架相比，Fastify 的性能更加强大，支持异步编程，具有...

    1 天前
  • 怎样在 Ubuntu 系统中安装 PM2

    PM2是一款开源的Node.js进程管理器，可以帮助我们更方便的管理我们的Node.js应用程序，减少Node.js应用程序宕机的可能性。本文将详细介绍如何在Ubuntu系统上安装PM2，并提供相关示...

    1 天前
  • React 测试工具 Enzyme：一个入门指南

    在前端开发中，我们经常需要对 React 组件进行测试来确保其行为与预期一致。而 Enzyme 就是一款广受欢迎的 React 测试工具，它提供了强大的 API 来帮助我们进行组件测试。

    1 天前
  • 解析 ES12 引入的数字分隔符

    随着 JavaScript 语言的不断发展，ES12 （即 ECMAScript 2021）引入了新的语法：数字分隔符。这个新的语法允许使用下划线（_）来分隔数字，使得数字更加易读和易于理解。

    1 天前
  • 如何在 PWA 中添加自定义的缓存策略？

    随着移动设备的普及和网络技术的不断进步，越来越多的应用程序开始采用 Progressive Web App（PWA）技术。PWA可以将网站应用程序转化为离线可访问、快速响应和具有本地化功能的应用程序，...

    1 天前
  • 如何使用 Babel 将代码转换成 ES2015

    在前端开发中，越来越多的开发者开始将目光投向了新一代的 JavaScript 语言规范 ES2015（也叫作 ECMAScript 6）。ES2015 引入了许多新特性和语言功能，可以让我们写出更加简...

    1 天前
  • Express.js 实现登陆验证教程

    随着互联网的发展，越来越多的网站和应用需要实现用户注册和登录功能。这些功能对于网站和应用的安全性和用户体验至关重要。本文将介绍如何使用 Express.js 实现登陆验证功能，让你的网站和应用更加安全...

    1 天前
  • Redux 中如何使用中间件？

    什么是 Redux 中间件？ Redux 中间件是 Redux 应用程序中的可插入功能，它允许在派发和处理 Redux Action 之间添加其他操作和逻辑。中间件可以处理异步操作、调用 API，添加...

    1 天前
  • 使用 Jest 测试插件——vue-test-utils

    Vue.js 是一个流行的前端 JavaScript 框架，可以帮助我们构建交互式的 web 应用程序。在开发过程中，测试是一个重要的步骤，有助于确保我们的代码在不同情况下的正确性。

    1 天前
  • Sequelize 够用吗？ORM 到底是不是好东西？

    随着前端技术的不断发展，越来越多的开发者开始使用 ORM（对象关系映射）框架来管理数据库。其中，Sequelize 是一个广泛使用的 ORM 框架之一，它可以让你使用 JavaScript 来操作数据...

    1 天前
  • PostgreSQL 10 的新功能和性能优化

    PostgreSQL 是一款功能强大、可扩展性好的关系型数据库，被广泛地用于各种 web 应用和企业应用中。在最新的 PostgreSQL 10 版本中，新增了一些重要的新功能和性能优化，本文将详细介...

    1 天前
  • 如何使用 Socket.io 和 MongoDB 实现聊天室？

    前端技术的发展让实时聊天变得越来越普遍，我们可以通过使用 Socket.io 和 MongoDB 实现一个简单的实时聊天室。在本文中，我们将介绍如何使用这两个技术来实现聊天室。

    1 天前
  • 详解：Dockerfile 中 ADD 与 COPY 的区别

    详解：Dockerfile 中 ADD 与 COPY 的区别 在 Dockerfile 文件中，ADD 和 COPY 都是用于将文件从本地复制到 Docker 镜像中。然而，它们有着不同的用法和作用。

    1 天前
  • Kubernetes 中 RBAC 实现权限控制的方法及注意事项

    在 Kubernetes 中，RBAC 是一种用于授权用户访问 API 资源的方法。通过 RBAC，用户可以设置不同的访问权限，以便于控制 Kubernetes 集群中各种资源的访问情况。

    1 天前
  • 解决 CSS Flexbox 实现横向滚动条的问题

    在开发 Web 应用时，经常需要在页面中实现横向滚动条，使得页面内容能够轮廓展示。实现过程中，CSS Flexbox 布局经常被使用。然而，在使用 Flexbox 实现横向滚动条时，往往会遇到一些问题...

    1 天前
  • 常见错误解决方案 - Express.js 使用

    Express.js 是 Node.js 最流行的 Web 应用程序框架，它提供了简单而强大的 API 来构建 Web 应用。然而，即使是最流行的框架也只是一种工具，使用不当或者疏忽都容易出现问题。

    1 天前
  • Cypress 自动化测试实战：端到端测试篇

    Cypress 是一个现代化的端到端测试工具，它是专门为现代 Web 应用程序打造的。Cypress 拥有丰富的 API，易于使用和学习，同时提供了一个交互式的测试运行器和强大的调试工具。

    1 天前
  • 如何使用 ES11 中的 Promise.allSettled 方法实现批量异步请求

    如何使用 ES11 中的 Promise.allSettled 方法实现批量异步请求 在前端开发中，经常需要发送多个异步请求，这时候我们可以使用 Promise.all 方法来处理，但是如果其中一个请...

    1 天前
  • Next.js HMR 原理解析

    在前端开发中，HMR（热模块替换）已经成为了一个常见的开发技术，可以大大提高开发效率和代码质量。Next.js 是一个流行的 React 服务端渲染框架，它也提供了 HMR 的支持。

    1 天前
  • Redux 中如何处理持久化数据？

    Redux 是一个流行的 JavaScript 应用程序状态管理库，但是我们如何在 Redux 中处理持久化数据？在本文中，我们将探讨一些在 Redux 中处理持久化数据的方法，并提供一些示例代码和最...

    1 天前

相关推荐