Interaction et vérification de la connexion de l'utilisateur AngularJs, bloquant l'explication détaillée du traitement FQ-js tutoriel-php.cn

Interaction et vérification de la connexion de l'utilisateur AngularJs, bloquant l'explication détaillée du traitement FQ

小云云

Libérer： 2018-01-20 14:09:57

original

1530 Les gens l'ont consulté

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 aider tout le monde.

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>

Copier après la connexion

2. Définissez le contrôleur pour la connexion de l'utilisateur, dans le contrôleur. Utilisez le http. service pour gérer l'interface de connexion :

$http({
    url:G.apiUrl_dl+&#39;loginByPhone&#39;,
    method:&#39;post&#39;,
    data:{
     &#39;phone&#39;:loginName,
     &#39;pwd&#39;:pwd
    },
    headers:{&#39;Content-Type&#39;:&#39;application/x-www-form-urlencoded&#39;},
    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    });

Copier après la connexion

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 à le 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(&#39;index&#39;);
    }else{
     // 登录失败的弹框提示
     $(&#39;#loginAction&#39;).modal(&#39;show&#39;);
    }

Copier après la connexion

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 le barre d'adresse 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 d'exécution 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 la connexion, nous le laisserons accéder à la page de connexion

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

Copier après la connexion

Recommandations associées :

Tutoriel de création d'environnement AngularJS pour débutants

Explication détaillée de la méthode d'implémentation d'instructions personnalisées dans AngularJS

Explication détaillée de la méthode d'implémentation des instructions personnalisées et des éléments de configuration des instructions dans AngularJS

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!