Explication détaillée des étapes d'interaction et de vérification lorsque les utilisateurs d'AngularJs se connectent

Cette fois, je vais vous apporter une explication détaillée des étapes d'interaction et de vérification lorsque les utilisateurs AngularJs se connectent Quelles sont les précautions pour l'interaction et la vérification. lorsque les utilisateurs d'AngularJs se connectent ? , ce qui suit est un cas pratique, jetons un coup d'œil.

1. Construction de pages statiques et mise en œuvre du formulaire ngvérification du formulaire :

<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 et utilisez le service http dans le contrôleur pour traiter 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 la connexion réussit, les données de l'utilisateur seront enregistrées dans un cookie ou une session et utiliseront le service $state pour accéder à la page spécifiée :

// 登录成功
    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 la barre d'adresse pour accéder à la page :

). Je mets le fonctionnement 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. S'il n'est pas connecté légalement, nous le ferons. laissez-le sauter. Allez sur 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');
  });
 }]);

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

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!