AngularJs Benutzer-Login-Interaktion und -Verifizierung, Blockieren der FQ-Verarbeitung, ausführliche Erklärung

In diesem Artikel wird hauptsächlich der Umgang mit AngularJs-Benutzeranmeldeproblemen ausführlich beschrieben, einschließlich der Interaktion und Überprüfung sowie der Blockierung der FQ-Verarbeitung. Interessierte Freunde können darauf verweisen.

1. Statische Seitenkonstruktion und ng-Formularüberprüfungsimplementierung:

<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. Definieren Sie den Controller für die Benutzeranmeldung. Verwenden Sie im Controller die HTTP-Funktion Dienst zur Verwaltung der Anmeldeschnittstelle:

$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. Wenn die Daten des Benutzers nach erfolgreicher Anmeldung in einem Cookie oder einer Sitzung gespeichert werden, verwenden Sie den $state-Dienst, um zu springen die angegebene Seite:

// 登录成功
    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 Der nächste Schritt besteht darin, zu verhindern, dass Benutzer die Anmeldeseite durch andere Methoden überspringen (z. B. durch direkte Eingabe der Adresse in Adressleiste zum Aufrufen der Seite), um FQ-Vorgang zu verhindern:

Ich habe den Vorgang dieser Methode in die Ausführungsmethode eingefügt, die wie zuvor erwähnt jedes Mal vor dem Aufrufen einer Seite überprüft wird ob der Benutzer rechtmäßig angemeldet ist. Nach der Anmeldung lassen wir ihn zur Anmeldeseite springen

angular.module.run(['$rootScope','$state',function($rootScope,$state){
  $rootScope.$on('$stateChangeStart',function(event,toState){
   // 防止FQ
   if(!(sessionStorage.getItem("token")))$state.go('register');
  });
 }]);

Verwandte Empfehlungen:

Tutorial zum Aufbau einer AngularJS-Umgebung für Anfänger

Detaillierte Erläuterung der Methode zur Implementierung benutzerdefinierter Anweisungen in AngularJS

Detaillierte Erläuterung der Methode zur Implementierung benutzerdefinierter Anweisungen und Befehlskonfigurationselemente in AngularJS

Das obige ist der detaillierte Inhalt vonAngularJs Benutzer-Login-Interaktion und -Verifizierung, Blockieren der FQ-Verarbeitung, ausführliche Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!