简介
在前后端分离的应用场景下，前端使用 token 对接口进行验证已经成为一个十分常见的需求。在 AngularJS 中，可以使用 angular-jwt 这样的插件来实现 token 验证，但这些插件在使用时需要手动配置一些信息，可能对于初学者来说会有一定的难度。因此，我们开发了一个 npm 包 simple-angular-jwt-auth 来简化 token 验证的流程。
simple-angular-jwt-auth 使用简单，只需要在 AngularJS 中引入该模块，然后在每次请求的时候将 token 作为参数发送给后端即可。它还具有一定的安全性，使用了 jwt 的签名验证，有效避免了 token 被恶意篡改的风险。
安装
npm install simple-angular-jwt-auth
使用
引入模块
在 AngularJS 项目的入口文件（通常是 index.html 或 app.js）中引入 simple-angular-jwt-auth 模块：
<script src="simple-angular-jwt-auth.js"></script>
配置
在 app.js 中配置 simple-angular-jwt-auth 模块：
angular.module('app', ['simple-angular-jwt-auth'])
.constant('JWT_OPTIONS', {
secret: 'YOUR_SECRET',
expiresIn: '1d'
});其中，JWT_OPTIONS 是一个常量，包含了 jwt 签名所需的 secret 和 expiresIn 两个参数。secret 表示签名所用的字符串，expiresIn 表示 token 的有效期。在实际使用时，需要将 YOUR_SECRET 替换成真实的 secret。
获取 token
在登录成功后服务端会返回一个带有用户信息的 token，我们需要将这个 token 存储在前端中，在每次请求时将 token 发送给后端进行验证。可以使用 $window.localStorage 来存储 token（当然也可以使用 $cookies 等其他方式存储）。
$http.post('/login', userData).then(function (response) {
$window.localStorage.setItem('token', response.data.token);
});发送请求
在每次请求时，将存储在前端中的 token 作为参数发送给后端：
$http.get('/api/data', {
headers: {'Authorization': 'Bearer ' + $window.localStorage.getItem('token')}
}).then(function (response) {
$scope.data = response.data;
});示例代码
客户端
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
------------- --- ---- ------------
------- ---------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------
------- --------------------------------------------
------- ------------------------
-------
----- -------------------------
---------- --- ---- ---------
----- --------------------
------ ------------ ---------------- ------------------- ---------
------ --------------- ------------------- ---------------------- ---------
------- ----------------------------
-------
-- -------------------------
-------
--------- -------------------- ---- -------
----------------------- --------------------------- --------------
------------------------ -
------- -------------
---------- ----
--
----------------------- -------- -------- -------- ------ -
------------ - -------- -- -
------------------------ -
------ -------------
--------- ---------------
---------------- ---------- -
------------------------------------- ---------------------
------------------
-- -------- ----- -
-------------------
---
--
--------------- - -------- -- -
---------------------- -
-------- ----------------- ------- - - --------------------------------------
---------------- ---------- -
----------- - --------------
-- -------- ----- -
-------------------
---
--
---服务端
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ------------------------
----- ---------- - -----------------------
----- --- - ----------
---------------------------
----- ---------- - -------------
---------------------- -------- ----- ---- -
----- ------- --------- - ---------
-- ------- -- ---------- -
------------------------------ -- -------- --- ------------
-
-- ----------- -----
----- ----- - ----------------- ----------- ----------- -------
------------------------------
---
-------------------- -------- ----- ---- -
-- -- -----
----- ----- - --------------------------------- ------
--- -
----- ------- - ----------------- ------------
--------------------------- ----- ---- -- -------------
- ----- ----- -
--------------------------- ------- -- -----------
-
---
---------------- -------- -- -
------------------- --------- -- ---- --------
---结论
simple-angular-jwt-auth 是一个十分方便的 AngularJS 模块，可以方便地实现 token 验证，在前后端分离的应用场景下具有十分重要的意义。在使用 simple-angular-jwt-auth 时，需要注意保护好 secret，确保 token 不被恶意篡改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005707f81e8991b448e7e9e