AngularJs User Login problem handling (interaction and verification, prevent FQ processing), angularjsfq

AngularJs User Login problem handling (interaction and verification, prevent FQ processing), angularjsfq

This article introduces AngularJs User Login interaction and verification, and prevents FQ processing, as detailed below

1. Static Page construction and ng form Verification implementation:

<Div class = "register-frame-all"> <div class = "register-frame"> <div class = "register-msg"> <I> </I> <form name = "loginForm" ng-submit = "loginAction () "> <div class =" form-group "> <div class =" input-group "> <span class =" input-group-addon register-user "> </span> <input autocomplete = "off" type = "number" class = "form-control" placeholder = "Enter the mobile phone number" required ng-model = "loginData. loginName "name =" loginName "> </div> <d Iv class = "input-group"> <span class = "input-group-addon register-pwd"> </span> <input type = "password" class = "form- control "placeholder =" enter the password "required ng-model =" loginData. pwd "name =" pwd "> </div> <button type =" submit "class =" btn-block btn-danger "ng-disabled = "! (LoginForm. loginName. $ valid) & (loginForm. pwd. $ valid )) "> log on </button> <em> </div> </form> </div> <div class =" register-pic "ng-style =" registerRnum "> </div>

2. Define the user login controller and use the http service to process the login interface in the Controller:

$ 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) {// operation after successful login... 18 19 });

3. If the user data is successfully saved to the cookie or session, use the $ state service to jump to the specified page:

// Login successful 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 {// The logon failure dialog box prompts $ ('# loginaction '). modal ('show ');}

4. The next step is to prevent users from skipping the logon page and using other methods (such as directly outputting the address to enter the page in the address bar) to prevent FQ operations:

The operation of this method is executed in the run method that the controller previously said to be the first to execute. Each time before entering a page, it will check whether the user is legally logged on, if it is not valid, We will redirect him to the logon page.

Angular. module. run (['$ rootScope', '$ State', function ($ rootScope, $ state) {$ rootScope. $ on ('$ stateChangeStart', function (event, toState) {// prevent FQ if (! (SessionStorage. getItem ("token") $ state. go ('register ') ;}) ;}]);

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.