AngularJS中的"Remember me"功能和Token

Question

我正在寻找一种更好的方法来解决我的问题。我的登录表单中有一个记住我功能，当用户点击记住我框时，我的API会将Token发送给我。

我的问题是在用户回到我的网站时，最好的存储该令牌并再次验证用户的方法是什么？

我想到的是：

1. 创建Cookie并将Token存储在其中。
2. 创建本地存储。

请给我任何可能有用的建议。

- GeekOnGadgets

Answer 1

使用 ngCookies: ngCookies 模块提供了一个方便的封装，用于读写浏览器 cookie。

首先您可以使用 bower bower install angular-cookies@X.Y.Z 或手动安装 ngCookies 到您的应用程序中。

然后在您的应用程序中注入 ngCookies，例如： angular.module('app', ['ngCookies']);

最后，像这样简单地使用：

angular.module('App', ['ngCookies'])
      .controller('demo', ['$cookies', function($cookies) {
          // Setting a cookie
          $cookies.put('cookieName', 'object');
          // Retrieving a cookie
          var sample= $cookies.get('cookieName');
         // Remove a cookie
          $cookies.remove('cookieName');
      }]);

- Umair Ahmed

---

由于在 Angular 代码中使用 DOM 对象不是一个好的实践，因此建议将此答案作为被接受的答案。 - Mustafa

Answer 2

我会使用像这样的工厂代码和 document.cookie 一起创建 cookie ：

创建一个 cookie（例如，此 cookie 在一年后过期）：

app.factory('$remember', function() {
    return function(name, values) {
        var cookie = name + '=';

        cookie += values + ';';

        var date = new Date();
        date.setDate(date.getDate() + 365);

        cookie += 'expires=' + date.toString() + ';';

        document.cookie = cookie;
    }
});

这个工厂将删除cookie：

app.factory('$forget', function() {
    return function(name) {
        var cookie = name + '=;';
        cookie += 'expires=' + (new Date()).toString() + ';';

        document.cookie = cookie;
    }
});

当用户成功登录后，使用 $remember 缓存密钥：

$remember('my_cookie_name', response.user._id);

登录用户时，始终检查 cookie 是否存在，否则使用标准登录并将其保存到其 cookie 中。如果未启用“记住我”，请忘记 document.cookie。

- willjleong

---

好的回答 :) 我会尝试并告诉你。 - GeekOnGadgets

请问您能否更详细地解释如何检查我的Cookie是否已设置？目前我正在使用布尔标志，但不起作用。有什么想法吗？ - GeekOnGadgets

即使cookie已过期，它仍然无法从浏览器中删除。 - ashishkumar148

@willjleong 我们如何检查 cookie？然后根据 cookie 应用条件。你能进一步解释吗？ - Umair Ahmed

Answer 3

(function(angular) {
  'use strict';
  angular.module('app', ['ngCookies'])
  .controller('mainController', ['$cookies', '$timeout', function($cookies, $timeout) {
    
    var vm = this;
    
    vm.message = '';
    
    vm.getCookies = getCookies;
    vm.setCookies = setCookies;
    vm.clearCookies = clearCookies;
    
    getCookies();
    
    function getCookies()
    {
      vm.var1 = $cookies.get('var1');
      vm.var2 = $cookies.get('var2');
    }
    
    function setCookies()
    {
      $cookies.put('var1', vm.var1);
      $cookies.put('var2', vm.var2);
      
      if (vm.var1 && vm.var2)
        showMessage('Cookies set successefully!');
      else
        showMessage('Please enter some value.');
    }
    
    function clearCookies()
    {
      $cookies.remove('var1');
      $cookies.remove('var2');
      
      getCookies();
      
      showMessage('Cookies cleared successefully!');
    }
    
    function showMessage(msg)
    {
      vm.message = msg;
      $timeout(function() {
        vm.message = '';
      }, 2000);
    }
    
  }]);
})(window.angular);

body
{
  padding: 10px;
}

<div ng-app="app" ng-controller="mainController as ctrl">

  <div class="panel panel-default">

    <div class="panel-heading">
      <a href="https://docs.angularjs.org/api/ngCookies/service/$cookies">ngCookies</a> sample 
    </div>

    <div class="panel-body">
      
      Enter some value, press 'Set cookies', than refresh page. (Refresh button on right top corner)
      <hr>

      <form ng-submit="ctrl.setCookies()">
        <div class="form-group">
          <label for="var1">Cookies for VAR1</label>
          <input type="text" class="form-control" id="var1" placeholder="value" ng-model="ctrl.var1">
        </div>
        <div class="form-group">
          <label for="var2">Cookies for VAR1</label>
          <input type="text" class="form-control" id="var2" placeholder="value" ng-model="ctrl.var2">
        </div>
        <button type="reset" class="btn btn-danger" ng-click="ctrl.clearCookies()">Clear</button>
        <button type="submit" class="btn btn-primary">Set cookies</button>
      </form>

    </div>

  </div>
  <div class="alert alert-success" role="alert" ng-show="ctrl.message">
    {{ctrl.message}}
  </div>
</div>

- Saniya syed qureshi

Answer 4

如果您正在使用令牌身份验证/ Restful API，则首选方法是使用localStorage。但是，除非用户选择“记住我”，否则使用此方法，他们将需要再次登录到他们打开的每个浏览器选项卡。因为每个使用sessionStorage保存的项目仅适用于单个选项卡。 我创建了一个库来简化此过程，并在所有打开的选项卡之间同步会话数据。用户体验类似于cookie身份验证提供的体验。 使用此功能，您可以执行以下操作：

if (rememberMe)
    storageManager.savePermanentData('data', 'key');
else
    storageManager.saveSyncedSessionData('data', 'key');

通过var myData = storageManager.getData('key');来检索数据。

您可以从此链接下载此库：http://www.ebenmonney.com/blog/how-to-implement-remember-me-functionality-using-token-based-authentication-and-localstorage-in-a-web-application

- adentum