Detaillierte Erläuterung der Interaktions- und Überprüfungsschritte bei der Anmeldung von AngularJs-Benutzern

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Interaktions- und Überprüfungsschritte geben, wenn sich AngularJs Benutzer anmelden Was sind die Vorsichtsmaßnahmen für die Interaktion und Überprüfung? Wenn sich AngularJs-Benutzer anmelden, ist das Folgende ein praktischer Fall, schauen wir uns das an.

1. Statischer Seitenaufbau und ng-FormularFormularüberprüfung Implementierung:

<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 und verwenden Sie den HTTP-Dienst im Controller, um die Anmeldeschnittstelle zu verarbeiten:

$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 Anmeldung erfolgreich ist, werden die Daten des Benutzers in einem Cookie oder einer Sitzung gespeichert und der $state-Dienst verwendet, um zur angegebenen Seite zu springen:

// 登录成功
    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 mit anderen Methoden überspringen (z. B. durch direkte Eingabe der Adresse in die Adressleiste, um die Seite aufzurufen:

). Ich habe die Operation dieser Methode wie oben erwähnt in die Ausführungsmethode eingefügt, die zuerst vom Controller ausgeführt wird. Vor dem Betreten einer Seite wird geprüft, ob der Benutzer rechtmäßig angemeldet ist Lassen Sie ihn springen. Gehen Sie zur Anmeldeseite

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

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Interaktions- und Überprüfungsschritte bei der Anmeldung von AngularJs-Benutzern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!