npm包@4geit/ngx-auth-service使用教程

介绍

@4geit/ngx-auth-service是一个用于Angular应用程序中的身份验证和授权的npm包。它默认使用JWT令牌，可以轻松地添加身份验证和授权功能。它还提供了路由保护的功能，以确保只有已登录的用户可以访问受保护的路由。

安装

使用以下命令安装包：

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

使用方法

  1. 引入模块

在你的模块中引入模块：

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

-----------
  -------- -
    -----------------------
      -------- ------------- -- -------------- -----
      ----------- ----------------------------- -- ---------
    --
  -
--
  1. 在你的组件中使用服务
------ - -------------- - ---- --------------------------

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

------- -
  -------------------------- ---------
    --------------- -- -
      -- ----
    -- ----- -- -
      -- ----
    ---
-
  1. 添加路由保护

你可以通过将 ngx-auth 指令添加到模板中，来保护你的路由。

在路由模块中：

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

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

在组件模板中：

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

API

模块

NgxAuthModule.forRoot(config: Config)

这是模块中的唯一选项。

参数 类型 必填 描述
jwtName string 是 JWT令牌名称（COOKIE NAME）
authServer string 是 鉴权服务器的URL

服务

NgxAuthService.signIn(username: string, password: string)

使用指定的凭据登录。

参数 类型 必填 描述
username string 是 用户名
password string 是 密码

该函数返回的是一个Observable对象，当登录成功时会发出一个数据对象，该数据对象包含JWT令牌，否则会发出一个错误对象。

NgxAuthService.signOut()

退出登录并清除JWT令牌。

该函数无需参数。

NgxAuthService.getToken()

返回当前存储的JWT令牌。

该函数无需参数，并返回一个字符串。

指令

NgxAuthDirective

该指令可以用于在模板中指定哪些内容是登录后才能访问的。

通过将ngx-auth指令添加到元素中，可以保护路由或者其他组件。

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

示例代码

以下是使用@4geit/ngx-auth-service实现的一个登录页示例：

login.component.ts

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

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

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

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

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

login.component.html

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

app.component.ts

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

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

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

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

app.module.ts

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

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

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

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

结论

使用@4geit/ngx-auth-service，可以轻松地添加身份验证和授权功能到你的Angular应用中，并提供路由保护的功能。它使用JWT令牌进行身份验证和授权，使整个过程更加简单和高效。希望这篇教程能够帮助你更好地使用该npm包。

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

阅读全文

猜你喜欢

  • npm 包 markdown-it-nomnoml 使用教程

    在前端开发中，我们常常需要在文档中使用 UML 图表来展示或者分析一些数据或者流程。这时候，我们可以使用 markdown-it-nomnoml 这个 npm 包来方便的生成 UML 图表。

    3 年前
  • npm 包 littlefork-plugin-collection 使用教程

    前言 在前端开发中，我们经常会需要使用一些小型的工具或插件来解决一些具体的问题。而随着前端技术的不断发展，npm 成为了前端开发中必不可少的一部分。npm 提供了大量的开源包，使用起来非常方便。

    3 年前
  • npm 包 littlefork-plugin-google 使用教程

    随着前端技术的不断发展，前端工程师们对于如何快速、高效地完成工作也提出了更高要求。因此，包管理工具npm在前端开发中的应用也越来越普遍。本文将介绍一个npm包：littlefork-plugin-go...

    3 年前
  • npm 包 "littlefork-plugin-tika" 使用教程

    在前端开发中，我们经常需要处理各种文件类型，包括文本、图片、音视频等等。而处理这些文件需要用到很多工具和技术，其中一个常用的工具是 Tika。它是一款 Apache 开源的文件解析工具，能够自动识别并...

    3 年前
  • redeux-inject

    Redeux dependency injection redeux-inject A tiny redeux dependency injector 💉 This module exposes t...

    3 年前
  • npm 包 littlefork-plugin-tor 使用教程

    简介 npm 是 Node.js 的包管理器，为 JavaScript 提供了大量的第三方工具和库。而 littlefork-plugin-tor 是一个基于 Node.js 的 npm 包，它可以轻...

    3 年前
  • npm 包 zapp-pipes-provider-televisa 使用教程

    随着现代 web 应用的不断发展，前端开发变得越来越复杂。为了更好地管理代码，我们需要使用一些工具和框架。其中，npm 是前端领域最流行的一个包管理工具。它提供了丰富的包资源，让我们可以更加高效地开发...

    3 年前
  • npm 包 log-stream-events-pmb 使用教程

    在前端开发中，我们经常需要查看应用程序中产生的日志来调试代码。通常情况下，我们使用 console.log() 函数来输出日志信息。但是，在一些复杂的场景中，比如在一个多线程或者分布式的环境中，这种方...

    3 年前
  • npm 包 @klingon/server 使用教程

    介绍 @klingon/server 是一款基于 Node.js 的轻量级服务端 Web 框架，其目的是使得开发者可以快速搭建自己的服务，并提供完善的开发工具和 API 管理。

    3 年前
  • npm 包 @klingon/app 使用教程

    @klingon/app 是一款前端开发需要的工具包，它提供了一些常用的函数和组件，帮助开发者节省时间和提升效率。这篇文章将详细介绍 @klingon/app 的使用方法，包括安装、引用、常用函数和组...

    3 年前
  • npm 包 ng-universal-storage 使用教程

    前言 在现代 Web 应用程序开发中，前端开发通常需要保存和共享一些数据。在以前，开发人员通常使用 cookie 或浏览器本地存储来实现这一需求。然而，这些选项都有其限制和问题，例如 cookie 的...

    3 年前
  • npm包 redux-action-plan 使用教程

    简介 Redux 是一个流行的 JavaScript 应用程序状态容器，用于管理应用程序的状态。它是 React 应用程序的最佳状态管理工具。 Redux-action-plan是Redux的一个np...

    3 年前
  • 使用 npm 包 simple-parallax 进行网站页面的视觉滚动特效

    在网站构建中，视觉滚动特效是吸引用户注意力和提高用户体验的绝佳方式。想要在网站中实现视觉滚动特效，可以使用 npm 包 simple-parallax。 安装 simple-parallax 安装 s...

    3 年前
  • npm 包 seq-exec 使用教程

    前言 在前端开发中，我们经常需要按照一定的顺序执行某些任务，比如编译 sass、压缩 js、转换图片等。这时我们可以使用 npm 包 seq-exec 来帮助我们管理这些任务的执行顺序。

    3 年前
  • npm 包 paginate-array-ts 使用教程

    在前端开发中，我们常常需要对数据进行分页展示，而 paginate-array-ts 就是一款方便快捷的用于数组分页的 TypeScript npm 包。本文将介绍 paginate-array-ts...

    3 年前
  • npm 包 webpack-rails-i18n 使用教程

    前端开发工作离不开项目构建和多语言支持，在前端代码实现多语言时，我们可以使用 webpack-rails-i18n 这个 npm 包来加速开发进度。本文将会详细介绍如何使用 webpack-rails...

    3 年前
  • npm 包 ceri-side-nav 使用教程

    简介 ceri-side-nav 是一个开源的 npm 包，用于创建侧边导航栏。它非常易于使用，支持多种自定义选项，并且可以为你的网站或应用程序添加一些额外的功能和美观性。

    3 年前
  • npm 包 react-datepicker-s 使用教程

    引言 在前端开发中，日期选择器是一个常见的组件。有些开发者会选择在项目中自己开发一个日期选择器组件，但是这样会耗费很多时间和精力。事实上，我们可以选择使用已有的 npm 包来实现该功能，这可以大大提高...

    3 年前
  • npm包 ceri-dropdown 使用教程

    在前端开发中，下拉框（Dropdown）是一个非常常见的组件。但是，在实现下拉框时，有时候需要重头开始编写 CSS 和 JavaScript，这对于一些刚开始学习前端的开发者来说可能会造成不小的困难。

    3 年前
  • npm 包 tag-reg 使用教程

    什么是 tag-reg？ tag-reg 是一个可以匹配 HTML 标签的正则表达式，可以在前端开发中用于匹配、替换指定标签的内容。它是一个非常实用的 npm 包，可以用于各种前端开发场景，例如： ...

    3 年前

相关推荐

    暂无文章