介绍
angularjs-2-localstorage-timer 是一个 AngularJS 模块，用于在浏览器中实现本地存储，并且允许设置存储数据的过期时间。该模块兼容 AngularJS 1.x 和 Angular 2+。
本篇文章将介绍如何使用 angularjs-2-localstorage-timer 模块，并提供一个完整的使用案例。
安装
通过 npm 安装 angularjs-2-localstorage-timer：
npm install angularjs-2-localstorage-timer --save
引入模块
在应用中引入 angularjs-2-localstorage-timer 模块：
-- -------------------- ---- ------- ------ ------- ---- ---------- ------ ------------------- ---- ------------------------ ------ -------------------- ---- ------------------------ ------ --------------------------------- ----- --- - ----------------------- - --------------------- ----------------------- -------------------------------- ---
使用案例
在本案例中，我们将通过 angularjs-2-localstorage-timer 实现一个需要登录的网站，用户登录后可以在本地存储中保存登录信息，登录信息的有效期为 10 秒。在登录状态过期之前，用户可以在页面上任意浏览，在状态过期之后，用户将被重定向到登录页面。
安装依赖
首先需要安装依赖项： lodash 和 q。
npm install lodash q --save
实现登录功能
我们需要一个简单的登录表单来允许用户登录：
<div ng-controller="LoginCtrl">
<form name="loginForm">
<label>Username: </label><input type="text" ng-model="user.username"><br>
<label>Password: </label><input type="password" ng-model="user.password"><br>
<button ng-click="login()">Login</button>
</form>
<p>{{ message }}</p>
</div>注意这个登录表单是一个 AngularJS controller，它会显示登录表单和登录错误或成功信息。 用户点击登录按钮时，会调用 $scope.login() 方法。
-- -------------------- ---- -------
--------------------------- ---------------- ------ ---------- ------------- -
-- --- ----- ---
----- --------- - ---------------
-- ---- ---- ----
----------- - ---
-- --- -- -----
------------ - ---------- -
-- ---- ---- ----------- -- ------
-------------------- ------------------------------------ -
-- --- ----- ---- -- -------
--------------------------- -------------------- ----
-- -------- -- ---- ----
------------------------
-- ---------- -
-- ----- --------
-------------- - ------- ------- -------- -- ----------
---
--
---请注意，当用户成功登录时，我们将调用 storageTimer.set 方法来保存登录信息。该方法将 TOKEN 和过期时间保存到本地存储中。
实现登录状态检查
现在，使用者已经登录到网站，并且在浏览本站时，应该检查用户是否已经登录到该网站。我们需要检索本地存储中的登录信息，如果登录信息存在且未过期，则允许用户在本站浏览。
-- -------------------- ---- -------
---------------------------- ---------- ------------- -
-- --- ----- ---
----- --------- - ---------------
-- ------ -- ----- ------
----------------------------------- --------------- -------- --------- ---------- ----------- -
-- ------------- --- -------- -
--- ----- - ----------------------------
-- ------- -- ----------------------------------- -
-- ----- ---- ---- --- -------- -- ----- ----
-------------------------------
-------------------------
-----------------------
- ---- -
-- ----- ----- -- ----- --- ----- ---
---------------- - ------
-
-
---
---如上所述，我们使用 $rootScope.$on('$stateChangeStart') 监听 $stateChangeStart 事件， 在事件发生时检查用户的登录状态。如果用户未登录或登录已过期，我们会将该用户重定向到登录页面。
处理登录状态
现在我们已经实现了登录和身份验证的功能，我们需要确保在网站上浏览时提供有关该用户的信息。为此，我们将保存 TOKEN，以便稍后验证用户并提供相应的信息。
-- -------------------- ---- -------
-------------------------- -------------------- ------- ------ -
-- --- ---- ------- -- -----
------------------ - -------- - ---------------- ------- - - ---------------- - -------------------------- -
-- ------- ---- -----------
----------- - --------------
---
---为此，我们使用 TOKEN 来请求用户数据，如果该用户有效，则显示相应的用户数据。如果用户数据已经过期，则该请求将失败并将用户重定向到登录页面。
查看完整代码
完整示例代码已经发布在 GitHub 上。如果你有兴趣，可以直接获取代码并在本地运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2a81e8991b448d9c8c