在现代的 Web 开发中，安全是一个非常重要的话题。有许多方面需要考虑，例如身份验证、授权、加密、防止 CSRF 和 XSS 等攻击等等。而前端开发人员需要负责处理其中一些方面，例如前端身份验证和授权等。为了简化这个过程，我们可以使用 npm 包 @savantly/ngx-security。
安装
在使用 npm 包 @savantly/ngx-security 之前，我们需要先安装它。可以通过在终端中输入以下命令来安装它：
npm install --save @savantly/ngx-security
使用方法
在安装完毕并添加了依赖之后，我们可以在项目中使用它。@savantly/ngx-security 主要提供了一些服务和组件来处理前端安全。我们可以将这些服务和组件注入到我们的组件中来使用他们。
Authentication Service
Authentication Service 提供了一些方法来处理前端身份验证。例如：
getCurrentUser(): Observable<CurrentUser>- 获取当前用户login(username: string, password: string): Observable<boolean>- 以用户名和密码的方式进行登录logout(): Observable<boolean>- 登出当前用户
下面是一个使用 Authentication Service 的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------------------- - ---- -------------------------
------------
--------- ------------
--------- -
----- ------------------------
------ ----------- ---------------------- --------------- ---------------------- ---------
------ --------------- ---------------------- --------------- ---------------------- ---------
------- -----------------------------
-------
-
--
------ ----- -------------- -
--------- -------
--------- -------
------------------- ------------ ---------------------- --
---------- -
------------------------------------- -------------------------------- -- -
-- --------- -
------------------- -----
- ---- -
-------------------- --------
-
---
-
-在这个例子中，我们定义了一个 LoginComponent 来进行用户登录。在 onSubmit 方法中，我们通过调用 AuthenticationService 的 login 方法来进行用户登录。如果登录成功，我们将会在控制台中打印出 "Logged in"。否则，我们将会打印出 "Invalid login"。
Authorization Service
Authorization Service 提供了一些方法来处理前端授权相关的操作。例如：
isAuthorized(permission: string): Observable<boolean>- 判断当前用户是否拥有给定权限authorize(permission: string): boolean- 验证当前用户是否拥有给定权限
下面是一个使用 Authorization Service 的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------------- - ---- -------------------------
------------
--------- -------------
--------- -
--------
-----
-- ---------------------------------------- -------------------------------------
-- ----------------------------------------- -----------------------------------
------
---------
-
--
------ ----- --------------- -
------------------- ------------ --------------------- --
-在这个例子中，我们定义了一个 HeaderComponent 来展示一些链接。通过调用 Authorization Service 的 isAuthorized 方法，我们可以判断当前用户是否具有特定权限。如果用户具有该权限，相关链接将被展示。否则，这些链接将不会被展示。
总结
在本文中，我们学习了如何使用 npm 包 @savantly/ngx-security 来简化前端安全相关的开发。我们详细介绍了 Authentication Service 和 Authorization Service，并给出了一些实际使用的示例。使用这些服务和组件，我们可以轻松地处理前端安全相关的任务，使得我们的前端代码更加安全可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b281e8991b448e2f55