Nhớ chức năng của tôi và Mã số trong Angularjs

Question

Tôi đang tìm cách tiếp cận tốt hơn cho vấn đề của mình ở đây. Tôi có một chức năng ghi nhớ tôi trên biểu mẫu đăng nhập của mình. Khi người dùng nhấp vào hộp nhớ tôi, API của tôi gửi cho tôi Mã thông báo.

Câu hỏi của tôi là cách tốt nhất để lưu trữ mã thông báo này và xác thực lại người dùng khi họ quay lại trang web của tôi là gì?

Những gì tôi nghĩ,

1. Tạo một Cookie và lưu trữ thẻ đó.
2. Tạo bộ nhớ cục bộ.

Vui lòng cho tôi lời khuyên nào có thể giúp tôi.

Answer 1

Tôi sẽ sử dụng document.cookie với một mã số nhà máy như thế này:

Tạo một cookie (ví dụ này hết hiệu lực trong một năm):

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

nhà máy này loại bỏ các tập tin cookie:

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

     document.cookie = cookie; 
    } 
}); 

Sau đó, bất cứ khi nào người dùng đăng nhập thành công trong bộ nhớ cache phím sử dụng $ nhớ:

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

Và luôn kiểm tra xem cookie có ở đó không khi đăng nhập người dùng khác sử dụng thông tin đăng nhập chuẩn và lưu nó vào cookie của họ. Nếu ghi nhớ tôi không được bật, hãy quên tài liệu.cookie

Answer 2

Sử dụng ngCookies: Mô-đun ngCookies cung cấp trình bao tiện lợi cho việc đọc và ghi cookie trình duyệt.

Trước tiên, bạn cài đặt ngCookies trong ứng dụng của mình bằng cách sử dụng bower bower install angular-cookies@X.Y.Z hoặc manully.

sau đó tiêm ngCookies trong ứng dụng của bạn như angular.module('app', ['ngCookies']);

sau đó chỉ cần sử dụng như

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

Nếu bạn đang sử dụng Mã xác thực/Restful API thì cách ưa thích là sử dụng localStorage. Tuy nhiên, bằng cách sử dụng phương pháp này, trừ khi người dùng chọn "Remember Me", họ sẽ được yêu cầu đăng nhập lại vào mỗi tab trình duyệt mà họ mở. Vì mỗi mục được lưu với sessionStorage chỉ khả dụng cho một tab. Tôi đã tạo một thư viện để đơn giản hóa việc này và đồng bộ hóa dữ liệu phiên trên tất cả các tab đã mở. Trải nghiệm người dùng tương tự với trải nghiệm được cung cấp bởi xác thực cookie. Với điều này bạn làm như sau:

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

Và bạn lấy dữ liệu bằng cách var myData = storageManager.getData('key');

Bạn có thể tải thư viện này từ liên kết này: 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>