web-dev-qa-db-fra.com

Mémoriser mes fonctionnalités et jeton dans Angularjs

Je cherche une meilleure approche de mon problème ici. J'ai une fonctionnalité de rappel de moi sur mon formulaire de connexion. Lorsque l'utilisateur clique sur la case Mémoriser mes informations, mon API m'envoie un jeton.

Ma question est la suivante: quel est le meilleur moyen de stocker ce jeton et d’authentifier de nouveau l’utilisateur une fois de retour sur mon site? 

Ce que je pensais, 

  1. Créez un cookie et stockez un jeton à cet endroit. 
  2. Créer un stockage local. 

S'il vous plaît donnez-moi des conseils qui pourraient m'aider.

javascriptangularjscookies
11
GeekOnGadgets

J'utiliserais document.cookie avec un code d'usine comme celui-ci:

Crée un cookie (par exemple, celui-ci expire dans un an):

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;
    }
});

Cette usine supprime le cookie:

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

        document.cookie = cookie;
    }
});

Ensuite, chaque fois qu'un utilisateur se connecte avec succès, met en cache la clé à l'aide de $ Remember:

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

Et vérifiez toujours si le cookie est présent lors de la connexion, sinon utilisez un identifiant standard et enregistrez-le dans leurs cookies. Si le rappel de moi n'est pas activé, oubliez le document.cookie 

8
willjleong

Utilisez ngCookies: Le module ngCookies fournit un wrapper pratique pour lire et écrire les cookies du navigateur.

Tout d'abord, vous installez ngCookies dans votre application à l'aide de bower bower install [email protected] ou manully.

puis injectez ngCookies dans votre application comme angular.module('app', ['ngCookies']);

alors utilisez simplement comme 

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');
      }]);
13
Umair Ahmed

(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>

0
Saniya syed qureshi

Si vous utilisez une API d'authentification de jeton/Restful, la méthode préférée consiste à utiliser la variable localStorage. Cependant, si vous utilisez cette approche, à moins que l'utilisateur ne sélectionne "Mémoriser mes informations", il leur sera demandé de se reconnecter à chaque onglet de navigateur ouvert. Parce que chaque élément enregistré avec sessionStorage n'est disponible que pour un seul onglet. J'ai créé une bibliothèque pour simplifier cela et synchroniser les données de session sur tous les onglets ouverts. L’expérience utilisateur est similaire à celle offerte par l’authentification par cookie. Avec ceci, vous faites quelque chose comme:

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

Et vous récupérez les données par var myData = storageManager.getData('key');

Vous pouvez télécharger cette bibliothèque à partir de ce lien: http://www.ebenmonney.com/blog/how-to-implement-remember-me-functionality-using-token-based-authentication-and-localstorage-in-a -application Web

0
adentum