Maison > Article > interface Web > Gestion des problèmes de connexion des utilisateurs AngularJs
Cet article présente principalement en détail la gestion des problèmes de connexion des utilisateurs d'AngularJs, y compris l'interaction et la vérification, et le blocage du traitement FQ. Il a une certaine valeur de référence. J'espère qu'il pourra vous aider.
1. Construction de page statique et implémentation de la vérification du formulaire ng :
<p class="register-frame-all"> <p class="register-frame"> <p class="register-msg"> <i></i> <form name="loginForm" ng-submit="loginAction()"> <p class="form-group"> <p class="input-group"> <span class="input-group-addon register-user"></span> <input autocomplete="off" type="number" class="form-control" placeholder="请输入手机号" required ng-model="loginData.loginName" name="loginName"> </p> <p class="input-group"> <span class="input-group-addon register-pwd"></span> <input type="password" class="form-control" placeholder="请输入密码" required ng-model="loginData.pwd" name="pwd"> </p> <button type="submit" class="btn btn-block btn-danger" ng-disabled="!( (loginForm.loginName.$valid) && (loginForm.pwd.$valid) )">登录</button> <em></em> </p> </form> </p> <p class="register-pic" ng-style="registerRnum"></p> </p> </p>
2. Définissez le contrôleur pour la connexion de l'utilisateur dans le contrôleur. pour gérer l'interface de connexion :
$http({ url:G.apiUrl_dl+'loginByPhone', method:'post', data:{ 'phone':loginName, 'pwd':pwd }, headers:{'Content-Type':'application/x-www-form-urlencoded'}, transformRequest: function(obj) { var str = []; for(var p in obj){ str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } return str.join("&"); } }).success(function(data){ // 登录成功后的操作...18 19 });
3. Si les données de l'utilisateur sont enregistrées dans un cookie ou une session après une connexion réussie, utilisez le service $state pour accéder à l'interface de connexion. spécifié Dans la page :
// 登录成功 if($scope.loginActionData.token){ sessionStorage.setItem("token", $scope.loginActionData.token); sessionStorage.setItem("tsname", $scope.loginActionData.name); sessionStorage.setItem("rights", $scope.loginActionData.rights); sessionStorage.setItem("userId", $scope.loginActionData.userId); sessionStorage.setItem("departmentsId", $scope.loginActionData.departmentsId); sessionStorage.setItem("departmentsName", $scope.loginActionData.departmentsName); $state.go('index'); }else{ // 登录失败的弹框提示 $('#loginAction').modal('show'); }
4 L'étape suivante consiste à empêcher les utilisateurs de sauter la page de connexion par d'autres méthodes (telles que la saisie directe de l'adresse dans l'adresse). barre pour accéder à la page) pour empêcher l'opération FQ :
Je mets l'opération de cette méthode dans la méthode run qui est exécutée en premier par le contrôleur comme mentionné précédemment, à chaque fois avant d'entrer dans une page, il vérifiera si. l'utilisateur est connecté légalement. Si ce n'est pas légal, après s'être connecté, nous le laisserons accéder à la page de connexion
angular.module.run(['$rootScope','$state',function($rootScope,$state){ $rootScope.$on('$stateChangeStart',function(event,toState){ // 防止FQ if(!(sessionStorage.getItem("token")))$state.go('register'); }); }]);
Recommandations associées :
Authentification de connexion utilisateur orientée objet PHP
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!