Maison > interface Web > js tutoriel > Gestion des problèmes de connexion des utilisateurs AngularJs

Gestion des problèmes de connexion des utilisateurs AngularJs

小云云
Libérer: 2018-01-02 10:45:20
original
1700 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 vous aider.

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. 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 à l'interface de connexion. 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 l'adresse). barre 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 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. Si ce n'est pas légal, après s'être connecté, 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 :

Exemple d'explication de l'acquisition de l'applet WeChat Numéro de téléphone portable Fonction de connexion de l'utilisateur autorisé

Explication détaillée de la façon dont JavaScript exploite les cookies pour implémenter des exemples de code de connexion de l'utilisateur

Authentification de connexion utilisateur orientée objet PHP

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal