Най-добри практики за управление на потребителски данни и удостоверяване в AngularJS приложения

AngularJS е популярна предна JavaScript рамка, която позволява на разработчиците да създават мощни и мащабируеми уеб приложения. Един от важните аспекти на изграждането на уеб приложения е управлението на потребителските данни и удостоверяването. В тази статия ще разгледаме някои от най-добрите практики и техники за управление на потребителски данни и удостоверяване в AngularJS приложение.

Ще обхванем теми като използване на JWT за удостоверяване, съхраняване на потребителски данни в бисквитки или локално хранилище, използване на услугата AngularJS $cookies за управление на бисквитки, използване на прехващачи на AngularJS за обработка на оторизация, внедряване на удостоверяване от страна на сървъра и управление на сесии и използване на защитена връзка. Имайки предвид тези най-добри практики и техники, можете да помогнете да гарантирате, че вашето AngularJS приложение е защитено и добре управлявано и осигурява страхотно потребителско изживяване за вашите потребители.

Ние ще предоставим примери за кодове, които да вървят заедно с всяка най-добра практика и техника, така че можете да видите как да ги внедрите във вашето AngularJS приложение.

JWT удостоверяване

Първо, трябва да добавите необходимите библиотеки към вашия проект чрез npm

npm install angular-jwt --save

Ще приемем, че вече сте внедрили вашия механизъм за влизане, сега нека започнем с дефинирането на услугата за оторизиране на JWT въз основа на идентификационните данни на потребителя.

angular.module('app').service('AuthService', function($http, $q, $state, $rootScope, jwtHelper) {
 
  var vm = this;

  // login user
  vm.login = function(username, password) {
    return $http.post('/api/authenticate', {username: username, password: password});
  };

  // add token to local storage
  function setToken(token) {
    return localStorage.setItem('id_token', token);
  }

  // retrieve token from local storage
  function getToken() {
    return localStorage.getItem('id_token');
  }

  // check if token is expired
  function isTokenExpired(token) {
    return jwtHelper.isTokenExpired(token);
  }

  // get a decoded token from local storage
  function getDecodedToken() {
    var token = getToken();
    if (token) {
      return jwtHelper.decodeToken(token);
    } else {
      return false;
    }
  }

  // logout user and remove token
  vm.logout = function () {
    localStorage.removeItem('id_token');
    $rootScope.currentUser = false;
    $state.go('login');
  };

  // authenticate user token
  vm.authenticate = function () {
    var token = getToken();
    if (token && !isTokenExpired(token)) {
      $rootScope.currentUser = getDecodedToken();
    } else {
      vm.logout();
    }
  }

  //Check if a user is authenticated
  vm.isAuthenticated = function () {
    var token = getToken();
    return token && !isTokenExpired(token);
  }

  // get a token for authenticated user
  vm.getToken = function () {
    return getToken();
  }

  // authorize user from JWT token
  vm.authorize = function () {
    $http.defaults.headers.common.Authorization = 'Bearer ' + getToken();
    $rootScope.isAuthenticated = vm.isAuthenticated();
    $rootScope.currentUser = getDecodedToken();
  }
 
});

Ето как да използвате AuthService за заявки за удостоверяване.

angular.module('app').controller('LoginCtrl', function(AuthService) {
 
  var vm = this;
 
  vm.login = function() {
    AuthService.login(vm.username, vm.password)
      .success(function(response) {
        AuthService.setToken(response.token);
        AuthService.authenticate();
      })
      .error(function() {
        alert('Login failed.');
      });
  };
 
});

Използване на услугата $cookies

Можете да съхранявате потребителски данни като потребителско име или всякакви други настройки в бисквитки и да осъществявате достъп до тях в приложението си с помощта на услугата $cookies.

angular.module('app').controller('MainCtrl', function ($scope, $cookies) {

  // set cookie
  $cookies.put('username', 'JohnSmith');

  // get a cookie
  $scope.username = $cookies.get('username');

});

Използване на прехващачи на AngularJS

Прехващачите са страхотен инструмент за автоматично добавяне на токен или друг хедър към всяка заявка, която вашето Angular приложение прави.

angular.module('app').factory('AuthInterceptor', function($q, $location) {

  return {

    request: function (config) {
      config.headers = config.headers || {};
      var token = localStorage.getItem('id_token');
      if (token) {
        config.headers.Authorization = 'Bearer ' + token;
      }
      return config;
    },

    responseError: function(response) {
      if (response.status === 401 || response.status === 403) {
        localStorage.removeItem('id_token');
        $location.path('/login');
      }
      return $q.reject(response);
    }

  };

});
 
angular.module('app').config(function($httpProvider) {
  $httpProvider.interceptors.push('AuthInterceptor');
});

В заключение, управлението на потребителските данни и удостоверяването е важен аспект от изграждането на AngularJS приложения. Следвайки най-добрите практики и техники, описани в тази статия, разработчиците могат да създават приложения, които са сигурни, добре управлявани и осигуряват страхотно потребителско изживяване.