Comment stocker la session utilisateur dans Angular?
J'ai commencé à utiliser AngularJS et je suis en train de magasin de session de l'utilisateur sur mon AngularApp.
Première étape à soumettre nom d'utilisateur et le mot de passe fonctionne.
Après cela, je stocke les username
extraites du service dans le $rootScope
.
La page suivante peut afficher le username
stockées.
Mais après l'actualisation, les $rootScope
est vide.
Je suis en train de faire un système d'authentification la plus simple 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 un $http
demande.
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 de travail de la session.
J'ai déjà utilisé UserApp mais il n'est pas ok pour moi. Je voudrais créer mon propre simple d'authentification.
source d'informationauteur Steffi
Vous devez vous connecter pour publier un commentaire.
$rootScope
sera toujours remis lors de l'actualisation de la page, puisque c'est une seule page app.Vous avez besoin d'utiliser quelque chose qui persiste côté client, comme un cookie ou sessionStorage (car ils ont une date d'expiration). Jetez un oeil à la documentation de
$cookieStore
: https://docs.angularjs.org/api/ngCookies/service/$cookieStoreRappelez-vous, sensible à la séance d'information doit être chiffré.
Vous pouvez utiliser
ngStorage
Un échantillon de exemple est montré ci-dessous
Travail De Démonstration
Vous avez besoin pour créer une api sur votre serveur afin de recueillir de l'utilisateur courant. Cette api doit renvoyer le même objet utilisateur en vous après vous être connecté.
Pour chaque dollar de la route.chemin d'accès que vous voulez à l'intérieur de $routeProvider, à l'appel de cette api dans le contrôleur à l'aide de ng-init. Si l'api renvoie un objet, ajouter l'objet à votre $rootScope, sinon, forcer l'utilisateur à la page de connexion.