Вспомните мне функциональность и токен в Angularjs

Я ищу лучший подход к моей проблеме здесь. У меня есть функция запоминания в моей форме входа. Ones пользователь нажмет на меня помнить я, мой API отправляет мне токен.

Мой вопрос в том, что является лучшим способом сохранить этот токен и снова аутентифицировать пользователя, когда они вернутся на мой сайт?

Что я подумал,

  • Создайте Cookie и сохраните токен.
  • Создайте локальное хранилище.

Пожалуйста, дайте мне совет, который мог бы мне помочь.

Ответ 1

Я бы использовал document.cookie с кодом factory следующим образом:

Создает файл 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;
    }
});

Этот factory удаляет файл 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

Ответ 2

Использовать ngCookies: Модуль ngCookies предоставляет удобную оболочку для чтения и записи куки файлов браузера.

Сначала вы устанавливаете ngCookies в своем приложении с помощью bower bower install [email protected] или manully.

затем введите 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');
      }]);

Ответ 3

Если вы используете Token Authentication/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

Ответ 4

(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="#" onclick="location.href='https://docs.angularjs.org/api/ngCookies/service/$cookies'; return false;">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>