Problembehandlung bei AngularJs-Benutzeranmeldung

Dieser Artikel stellt hauptsächlich die Behandlung von AngularJs-Benutzeranmeldeproblemen im Detail vor, einschließlich der Interaktion und Überprüfung sowie der Blockierung der FQ-Verarbeitung. Ich hoffe, dass er allen helfen kann.

1. Statische Seitenerstellung 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 http 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 Dienst $state, 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:

Beispielerklärung der WeChat-Applet-Erfassung. Mobiltelefonnummer autorisierter Benutzer-Anmeldefunktion

Detaillierte Erläuterung, wie JavaScript Cookies betreibt, um Beispiele für Benutzeranmeldecodes zu implementieren

Objektorientierte PHP-Benutzeranmeldungsauthentifizierung

Das obige ist der detaillierte Inhalt vonProblembehandlung bei AngularJs-Benutzeranmeldung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!