介绍
simple-guard-js 是一个在前端使用的 JavaScript 库，用于对一些敏感操作进行保护。通过 simple-guard-js 可以实现以下功能：
- 禁止连续点击按钮
- 防止表单重复提交
- 在数据请求中添加 token 验证等
simple-guard-js 提供的功能可以在保证网站安全的同时，提高网站的用户体验和用户满意度。
安装
simple-guard-js 的安装可以使用 npm，使用以下命令即可：
npm install simple-guard-js
在安装完成后，可以在项目中引入 simple-guard-js：
import SimpleGuard from 'simple-guard-js';
使用
禁止连续点击按钮
使用 simple-guard-js 可以轻松地实现禁止用户连续点击按钮的功能。在按钮上添加 simple-guard 属性即可实现，如下所示：
<button simple-guard>提交</button>
在 JavaScript 中，需要先初始化 SimpleGuard，然后将所有需要被禁止连续点击的按钮传递进去：
const simpleGuard = new SimpleGuard();
simpleGuard.handleButtons(document.querySelectorAll('[simple-guard]'));防止表单重复提交
在表单提交时，使用 simple-guard-js 可以很方便地避免用户多次提交表单的问题。方法与禁止连续点击按钮类似，只需要在 form 元素上添加 simple-guard 属性即可：
<form simple-guard> <input type="text" name="username" /> <button type="submit">提交</button> </form>
在 JavaScript 中，也需要先初始化 SimpleGuard，然后将 form 元素传递进去：
const simpleGuard = new SimpleGuard();
simpleGuard.handleForm(document.querySelector('[simple-guard]'));添加 token 验证
在数据请求中，我们可能需要添加 token 验证，以确保请求的安全性。simple-guard-js 为此提供了很好的解决方案。首先，在每个请求中添加 simple-guard 的 headers，用于验证请求是否合法：
const headers = {
'Authorization': 'Bearer ' + token,
'SimpleGuard': 'simple-guard-js'
};然后将 headers 传递给 SimpleGuard 的方法中：
const simpleGuard = new SimpleGuard(); simpleGuard.addHeaders(headers);
在之后的每个请求中，simple-guard-js 都会自动地添加 headers 中的信息。
示例代码
为了更好地理解 simple-guard-js 的使用，这里提供一份示例代码，演示如何在表单提交时，禁止连续点击按钮，并同时添加 token 验证信息。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------- ----------
------- -------------------------------------------------------------------------------------
--------
----- ------- - -
---------------- ------- - - --------
-------------- -----------------
--
------------- - -------- -- -
----- ----------- - --- --------------
------------------------------------------------------ ---------
--
---------
-------
------
------
------ ----------- --------------- ----------------- ---------
------ --------------- --------------- ---------------- ---------
------- ------------- ------------------------
-------
-------
-------以上示例代码可以实现对表单提交的禁止连续点击功能以及添加 token 验证信息的功能。通过示例代码，可以更好地理解 simple-guard-js 的使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc345