Ricordami funzionalità e Token in Angularjs

Question

Sto cercando un approccio migliore al mio problema qui. Mi ricordo di funzionalità sul mio modulo di accesso. L'utente clicca sulla casella ricordami, La mia API mi invia Token.

La mia domanda è qual è il modo migliore per memorizzare questo token e autenticare nuovamente l'utente quando tornano al mio sito?

Quello che ho pensato,

1. creare un cookie e memorizzare Token lì.
2. Creare un archivio locale.

Per favore dammi qualche consiglio che potrebbe aiutarmi.

Answer 1

userei document.cookie con un codice di fabbrica come questo:

crea un cookie (ad esempio questo scade in un anno):

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

Questa fabbrica rimuove il cookie:

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

     document.cookie = cookie; 
    } 
}); 

Poi ogni volta che un utente accede con successo nella cache la chiave utilizzando $ ricordate:

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

E controllare sempre se il cookie è presente quando si accede l'utente, utilizzare un accesso standard e salvarlo nei propri cookie. Se il ricordo di me non è abilitato, dimenticare il document.cookie

Answer 2

Utilizzare ngCookies: Il modulo ngCookies offre una vantaggiosa wrapper per i cookie di lettura e scrittura del browser.

Prima di installare ngCookies nella tua app utilizzando il pergolato bower install angular-cookies@X.Y.Z o manully.

poi iniettare ngCookies nella tua app come angular.module('app', ['ngCookies']);

quindi è sufficiente utilizzare come

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

Answer 3

Se si utilizza token di autenticazione/RESTful API quindi il modo migliore è quello di utilizzare il localStorage. Tuttavia, utilizzando questo approccio a meno che l'utente non selezioni "Remember Me", verrà richiesto di accedere nuovamente a ogni scheda del browser che aprono. Poiché ogni elemento salvato con sessionStorage è disponibile solo per una singola scheda. Ho creato una libreria per semplificare questo e sincronizzare i dati di sessione tra tutte le schede aperte. L'esperienza dell'utente è simile a quella offerta dall'autenticazione dei cookie. Con questo si fa qualcosa di simile:

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

E si recuperano dati da var myData = storageManager.getData('key');

È possibile scaricare questa libreria da questo link: http://www.ebenmonney.com/blog/how-to-implement-remember-me-functionality-using-token-based-authentication-and-localstorage-in-a-web-application

Answer 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="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>