web-dev-qa-db-fra.com

Comment stocker la session utilisateur dans Angular?

Je viens de commencer à utiliser AngularJS et j'essaie de stocker la session utilisateur sur mon AngularApp.

La première étape pour soumettre un nom d'utilisateur et un mot de passe fonctionne. Après cela, je stocke le username récupéré du service dans le $rootScope. La page suivante peut afficher les username stockés.

Mais après un rafraîchissement, le $rootScope Est vide.

J'essaie de faire un système d'authentification aussi simple que possible.

myApp.controller('loginController', ['$scope', '$rootScope', '$location', 'AuthService', '$route',
  function ($scope, $rootScope, $location, AuthService, $route) {

      $scope.login = function (credentials) {
        AuthService.login(credentials).then(function (response) {
          if(response.data == "0"){
            alert("Identifiant ou mot de passe incorrect");
          }
          else {
            // response.data is the JSON below 
            $rootScope.credentials = response.data;           
            $location.path("/");
          }
        });
      };

}]);

AuthService.login() fait une requête $http.

JSON

 {user_id: 1, user_name: "u1", user_display_name: "Steffi"}

HTML:

 <div>Welcome {{ credentials.user_display_name }}!</div>

J'ai essayé beaucoup de tutoriels, mais je ne peux pas faire fonctionner la session. J'ai déjà utilisé UserApp mais ça ne me convient pas. Je voudrais créer ma propre authentification simple.

javascriptangularjssessioncookieslogin
11
Steffi

$rootScope sera toujours réinitialisé lorsque la page sera actualisée, car il s'agit d'une application d'une seule page.

Vous devez utiliser quelque chose qui persiste côté client, comme un cookie ou sessionStorage (car ils ont tous deux un délai d'expiration). Jetez un œil à la documentation de $cookieStore: https://docs.angularjs.org/api/ngCookies/service/$cookieStore

N'oubliez pas que les informations de session sensibles doivent être chiffrées.

9
Andrew Church

Vous pouvez utiliser

ngStorage

Un module AngularJS qui fait fonctionner le stockage Web de la manière Angular Way. Contient deux services: $ localStorage et $ sessionStorage.

Différences avec d'autres implémentations

No Getter 'n' Setter Bullshit - Directement à partir de la page d'accueil AngularJS: "Contrairement à d'autres frameworks, il n'est pas nécessaire [...] d'envelopper le modèle dans méthodes d'accesseurs. Juste du vieux JavaScript ici. " Vous pouvez désormais profiter du même avantage tout en assurant la persistance des données avec Web Storage.

sessionStorage - Nous avons couvert ce copain souvent négligé.

Code propre - Écrit de la manière Angular Way, bien structuré avec la testabilité en tête.

Pas de repli de cookie - Avec le stockage Web étant facilement disponible dans tous les navigateurs pris en charge officiellement par AngularJS, un tel repli est largement redondant.

Un exemple d'exemple est présenté ci-dessous

Démo de travail

var eS = angular.module('exampleStore', ['localStorage']);
12
Nidhish Krishnan

Vous devez créer une API sur votre serveur pour collecter l'utilisateur actuel. Cette API doit renvoyer le même objet utilisateur que celui que vous avez après vous être connecté.

Pour chaque $ route.path que vous souhaitez sécuriser dans $ routeProvider, appelez cette API dans le contrôleur en utilisant ng-init. Si l'API renvoie un objet, ajoutez l'objet à votre $ rootScope, sinon, forcez l'utilisateur à la page de connexion.

5
Bram E Pramono