Angularjs method of realizing user login status (model add intercepting filter, route increase limit) _angularjs

This article illustrates the method of Angularjs to realize user login status. Share to everyone for your reference, specific as follows:

When using Angularjs's single page application, because it is local routing in the control page jump, but sometimes we need to determine whether the user login to determine whether the user can enter the interface.

Angularjs is an MVC architecture so it is easy and flexible to implement, we only add a routed event Maincontroller to listen and judge, so you can avoid the user without login directly enter the routing address to jump to the login interface address

$rootScope in code. User is the login to put the information on the global Rootscope, convenient for other places to use, $rootScope. Defaultpage is also the default home page, initialization of the time written dead to the Rootscope.

$rootScope. $on (' $stateChangeStart ', function (event, tostate, Toparams, FromState, fromparams) {
  if (tostate.name= = ' Login ' return;//If you are entering the login interface, allow
  //If the user does not exist if
  (! $rootScope. user | |! $rootScope. user.token) {
    Event.preventdefault ()//cancels default jump behavior
    $state. Go ("login", {from:fromstate.name,w: ' Notlogin '});//jump to login interface
  }
});

In addition, the user has logged in, but the login timeout, there is the increase in the background of the interface to enhance the security of the judgment. Cannot rely entirely on local logic

We add a user interceptor in the model, rensponseerror in the error code, throw the event to contoller or view to deal with

App.factory (' Userinterceptor ', ["$q", "$rootScope", Function ($q, $rootScope) {return
  {
    request:function ( Config) {
      config.headers["TOKEN"] = $rootScope. User.token;
      return config;
    },
    responseerror:function (response) {
      var data = Response.data;
      Determine the error code if it is not logged
      in if (data["errorcode"] = = "500999") {
        //empty user local token stored information
        if $rootScope. user = {token: ""} ;
        Global event, which makes it easier for other view to get the event and give the appropriate hints or handle
        $rootScope. $emit ("userintercepted", "Notlogin", response);
      }
      If it is a login timeout if
      (data["errorcode"] = = "500998") {
        $rootScope. $emit ("userintercepted", "sessionout", response) ;
      }
      Return $q. Reject (response);}}
]);

Don't forget to register the interceptor in the Angularjs config.

App.config (function ($httpProvider) {
  $httpProvider. Interceptors.push (' Userinterceptor ');
});

Finally, the error event is handled in controller

$rootScope. $on (' userintercepted ', function (errortype) {
  //jump to login interface, where I recorded a from, so that you can automatically jump to the interface before login after login
  $ State.go ("Login", {from: $state. Current.name,w:errortype});
});

In the end, you can do more detail in Logincontroller.

If the user is logged in, immediately jumps to a default home page without having to log on to the
if ($rootScope. User.token) {
  $state. Go ($rootScope. defaultpage);
  return;
}

In addition, you can jump to the previous interface after a successful login callback, which is the record from

var from = $stateParams [' from '];
$state. Go && from!= "Login" from: $rootScope. defaultpage);

More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"

I hope this article will help you to Angularjs program design.