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 :

Exemple d'explication de l'acquisition de l'applet WeChat Numéro de téléphone portable Fonction de connexion de l'utilisateur autorisé

Explication détaillée de la façon dont JavaScript exploite les cookies pour implémenter des exemples de code de connexion de l'utilisateur

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!