AngularJs user login problem handling-JS Tutorial-php.cn

AngularJs user login problem handling

小云云

Release： 2018-01-02 10:45:20

Original

1735 people have browsed it

This article mainly introduces the handling of AngularJs user login issues in detail, including interaction and verification, and blocking FQ processing. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

1. Static page construction and ng form verification implementation:

<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>

Copy after login

2. Define the controller for user login and use http in the controller Service processing login interface:

$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    });

Copy after login

3. If the login is successful, the user's data will be saved in cookie or session and the $state service will be used to jump to the specified 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;);
    }

Copy after login

4. The next step is to prevent users from skipping the login page through other methods (such as directly entering the address in the address bar to enter the page):

The operation of this method is executed in the run method that is executed first by the controller as mentioned before. Every time before entering a page, it will be checked whether the user is logged in legally. If it is not logged in legally, we will let him Jump to the login page

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;);
  });
 }]);

Copy after login

Related recommendations:

An example of the WeChat applet obtaining the mobile phone number authorized user login function

Detailed explanation of how javascript operates cookies to implement user login code examples

php object-oriented user login authentication

The above is the detailed content of AngularJs user login problem handling. For more information, please follow other related articles on the PHP Chinese website!