npm 包 @bsk/ng-security 使用教程

@bsk/ng-security 是一个 Angular 应用程序安全性工具包,为 Angular 应用提供了许多常见的安全功能和组件。它可以用于保护应用程序,管理用户凭据并实现访问控制策略。本文将详细介绍如何安装和使用 @bsk/ng-security 这个 npm 包。

安装

你可以使用 npm 包管理器来安装 @bsk/ng-security,执行以下命令:

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

在安装完成之后,你可以将安全模块引入到 Angular 应用程序模块:

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

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

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

使用

TokenService

TokenService 提供了处理和管理用户身份验证和授权 Token 的功能。通常情况下,Token 都是通过登录和授权过程中生成的。下面是一些示例代码,用于在应用程序中使用它:

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

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

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

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

Security Guard

守卫在处理路由事件时,用于控制对特定路由的访问权限。Security Guard 可以保护路由的访问,只有在用户已经登录并获得具有必要角色的授权时才会给予访问。

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

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

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

在设置完守卫之后,你需要将它与路由绑定到一起:

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

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

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

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

EncryptedInput

EncryptedInput 用于以安全和加密的方式收集敏感信息。

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

你可以通过以下的方式来访问已解密的值:

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

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

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

总结

@bsk/ng-security 简化了在 Angular 应用程序中处理安全性的过程。它提供了许多常见的安全功能和组件,例如 TokenService、AuthGuard 和 EncryptedInput。通过使用它,你可以快速地增强和保护你的应用程序,并且能够让你更专注于业务逻辑的开发。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005596b81e8991b448d6f00


猜你喜欢

  • npm 包 ng-seed-package 使用教程

    简介 npm 是前端项目中经常使用的包管理器,而 ng-seed-package 是一个基于 Angular 框架的脚手架工具。通过这个工具,我们可以方便地创建一个 Angular 组件库。

    2 年前
  • npm 包 @wesleytodd/migrate 使用教程

    随着前端技术的不断发展,我们需要不断地升级和维护我们的项目。在这个过程中,数据库的升级是一个很重要的环节。而使用 npm 包 @wesleytodd/migrate 可以帮助我们更加方便地管理数据库的...

    2 年前
  • npm 包 coreui-react-starter 使用教程

    简介 coreui-react-starter 是一个基于 React 和 CoreUI 的开发模板,提供了一个完整的前端开发框架,可以帮助开发者快速构建一个完整的 Web 应用。

    2 年前
  • distributedlife-redux-log-slow-reducers 使用教程

    前言 随着前端项目越来越庞大和复杂,redux 中的 reducer 也变得越来越复杂。一些大型的、嵌套的 reducer 可能无法使用正则表达式或手动计时的方式方便地进行性能测试。

    2 年前
  • npm包 ember-cli-ahoy 使用教程

    简介 Ember-cli-ahoy是一个 Ember.js 应用程序的追踪解决方案,它可以帮助你收集并监控来自访问者的活动,并提供一个清晰的界面来分析这些数据。 安装 在你的 Ember.js 应用中...

    2 年前
  • npm 包 exprss 使用教程

    1. 简介 Express 是 Node.js 的一个 Web 开发框架,是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,提供一系列强大的特性帮助你创建各种 Web 应用。

    2 年前
  • npm包2d-gaming使用教程

    2D游戏开发是前端开发的一项重要技能。然而,从头开始构建游戏可能会非常繁琐,需要处理许多低级别的细节。因此,有许多npm包可以帮助我们快速开发2D游戏。其中之一是2d-gaming npm包,一个易于...

    2 年前
  • npm 包 empiria.core 使用教程

    empiria.core 是一个为前端应用提供全栈式应用解决方案的 npm 包。它能够轻松地为你的前端项目添加数据库、用户认证、服务器端路由和数据存储等功能。这篇文章将详细介绍如何使用 empiria...

    2 年前
  • npm 包 @bsk/ng-seed-package 使用教程

    在前端开发中,使用一些优秀的工具包可以大大提高开发效率。@bsk/ng-seed-package 是一款优秀的 npm 包,旨在提供 Angular 应用的快速启动模板和工具。

    2 年前
  • npm 包 fair-analytics-client-api 使用教程

    本文将介绍如何使用 fair-analytics-client-api 这个 NPM 包进行数据采集和分析。 fair-analytics-client-api 应用于前端网页应用程序,使其能够跟踪用...

    2 年前
  • npm 包 draft-js-inline-toolbar-plugin-with-override-hook 使用教程

    前言 在前端开发中,文本编辑器是一个基础且重要的工具,而 Draft.js 是一个可扩展的富文本编辑器,提供了丰富的 API 和插件,使得定制化编辑器变得相对容易。

    2 年前
  • npm 包 @gilbertco/config 使用教程

    随着前端开发的快速发展,现在已经需要使用各种工具、框架、库等来完成项目开发,其中 npm 是一个非常流行的工具,可以让我们轻松地管理和使用第三方包。 在这篇文章中,我们将会介绍 npm 包 @gilb...

    2 年前
  • npm 包 nevale 使用教程

    前言 随着现代 Web 应用的发展,前端技术也越来越成熟。像 React、Vue.js 这样的库和框架已经成为了构建 Web 应用的主流技术。而作为前端开发者,我们也需要了解一些工具和库来辅助我们的开...

    2 年前
  • npm 包 @jemmyphan/reactstrap 使用教程

    简介 @jemmyphan/reactstrap 是一个基于 Bootstrap 4 的 React 组件库,可以在 React 项目中轻松使用 Bootstrap 的界面元素和样式。

    2 年前
  • npm 包 scopy 使用教程

    在前端开发的过程中,经常需要操作 DOM,各种操作都包含在一个元素之中。这样的情况下,如果需要对其中的某些内容进行处理,就需要把要操作的元素提取出来。而这时就有了一个问题,如何在 DOM 中准确定位到...

    2 年前
  • npm 包 testerino 使用教程

    什么是 testerino? testerino 是一个为 JavaScript 开发人员而设计的测试框架。它让测试变得更简单,也能使测试变得更快和更有趣。它基于流行的测试框架 Mocha 和断言库 ...

    2 年前
  • npm 包 lighthouse2 使用教程

    简介 lighthouse2 是一款基于 Google Lighthouse 开发的命令行工具,用于测试网站的性能、可用性和可访问性。它可以检查网站的许多方面,例如:网站打开速度、网络性能、安全漏洞等...

    2 年前
  • npm 包 recvfrom 使用教程

    在前端开发中,我们经常需要处理网络通信相关的任务。而在 Node.js 里,有一个很方便的 npm 包 recvfrom,可以帮助我们更方便地处理网络数据收发。本文将为大家详细介绍 npm 包 rec...

    2 年前
  • npm 包 vue2-scrollbar-fork 使用教程

    1.0 前言 在现代 web 应用中,滚动条是一个很重要的组件,有时候默认的浏览器滚动条无法满足要求,需要使用一些定制的组件。vue2-scrollbar-fork 是一个 Vue.js 组件,可以定...

    2 年前
  • npm包pagination-ss使用教程

    Pagination-ss是一个基于JavaScript的轻量级分页库,可以为前端开发人员构建更易用的分页组件。它支持自定义样式、改变数据源和一键生成页面等功能。本文将详细介绍如何使用npm包pagi...

    2 年前

相关推荐

    暂无文章