Redirecting to a certain route based on condition

Question

I m writing a small AngularJS app that has a login view and a main view  configured like so    routeProvider   when   main     templateUrl   partials main html    controller  MainController     when   login    templateUrl   partials login html   controller  LoginController     otherwise  redirectTo    login       My LoginController checks the user pass combination and sets a property on the  rootScope reflecting this   function LoginController  scope   location   rootScope      scope attemptLogin   function        if    scope username     scope password        test          rootScope loggedUser    scope username           location path    main           else            scope loginError    Invalid user pass              Everything works  but if I access http   localhost   main I end up bypassing the login screen  I wanted to write something like  whenever the route changes  if  rootScope loggedUser is null then redirect to  login            wait  Can I listen to route changes somehow  I ll post this question anyway and keep looking

User · Answer

It s possible to redirect to another view with angular-ui-router  For this purpose  we have the method  state go  target view    For example    ---- app js -----   var app   angular module  myApp     ui router       app config function   stateProvider   urlRouterProvider            Otherwise      urlRouterProvider otherwise             stateProvider                Index will decide if redirects to Login or Dashboard view              state  index                      url                      controller   index controller                                state  dashboard                     url    dashboard                   controller   dashboard controller                   templateUrl   views dashboard html                                state  login                     url    login                   controller   login controller                   templateUrl   views login html                              Associate the  state variable with  rootScope in order to use it with any controller  app run function   rootScope   state   stateParams             rootScope  state    state           rootScope  stateParams    stateParams            app controller  index controller   function   scope   log            Check if the user is logged prior to use the next code         if   isLoggedUser             log log  user not logged  redirecting to Login view               Redirect to Login view           scope  state go  login          else              Redirect to dashboard view           scope  state go  dashboard                 ----- HTML -----   lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt My WebSite lt  title gt            lt meta charset  utf-8  gt           lt meta http-equiv  X-UA-Compatible  content  IE edge chrome 1  gt           lt meta name  description  content  MyContent  gt           lt meta name  viewport  content  width device-width  initial-scale 1  gt            lt script src  js libs angular min js  type  text javascript  gt  lt  script gt           lt script src  js libs angular-ui-router min js  type  text javascript  gt  lt  script gt           lt script src  js app js  type  text javascript  gt  lt  script gt        lt  head gt       lt body ng-app  myApp  gt           lt div ui-view gt  lt  div gt       lt  body gt   lt  html gt

User · Answer

In your app js file    run    rootScope     state   function  rootScope   state            rootScope  on   locationChangeStart   function event  next  current            if    rootScope loggedUser    null               state go  home

User · Answer

I m doing it using interceptors  I have created a library file which can be added to the index html file  This way you ll have global error handling for your rest service calls and don t have to care about all errors individually  Further down I also pasted my basic-auth login library  There you can see that I also check for the 401 error and redirect to a different location  See lib ea-basic-auth-login js  lib http-error-handling js         ngdoc overview    name http-error-handling    description     Module that provides http error handling for apps      Usage    Hook the file in to your index html   lt script src  lib http-error-handling js  gt  lt  script gt    Add  lt div class  messagesList  app-messages gt  lt  div gt  to the index html at the position you want to   display the error messages      function      use strict   angular module  http-error-handling            config function  provide   httpProvider   compileProvider            var elementsList                 var showMessage   function content  cl  time                    lt div  gt                     addClass cl                   hide                    fadeIn  fast                    delay time                   fadeOut  fast   function       this  remove                        appendTo elementsList                   text content                        httpProvider responseInterceptors push function  timeout   q                return function promise                    return promise then function successResponse                        if  successResponse config method toUpperCase       GET                           showMessage  Success    http-success-message   5000                       return successResponse                      function errorResponse                        switch  errorResponse status                            case 400                              showMessage errorResponse data message   http-error-message   6000                                                                                               break                          case 401                              showMessage  Wrong email or password    http-error-message   6000                               break                          case 403                              showMessage  You don  t have the right to do this    http-error-message   6000                               break                          case 500                              showMessage  Server internal error      errorResponse data message   http-error-message   6000                               break                          default                              showMessage  Error     errorResponse status          errorResponse data message   http-error-message   6000                                             return  q reject errorResponse                                                            compileProvider directive  httpErrorMessages   function                 return                   link  function scope  element  attrs                        elementsList push   element                                                                 css http-error-handling css   http-error-message       background-color   fbbcb1      border  1px  e92d0c solid      font-size  12px      font-family  arial      padding  10px      width  702px      margin-bottom  1px      http-error-validation-message       background-color   fbbcb1      border  1px  e92d0c solid      font-size  12px      font-family  arial      padding  10px      width  702px      margin-bottom  1px     http-success-message       background-color   adfa9e      border  1px  25ae09 solid      font-size  12px      font-family  arial      padding  10px      width  702px      margin-bottom  1px      index html   lt  doctype html gt   lt html lang  en  ng-app  cc  gt       lt head gt           lt meta charset  utf-8  gt           lt title gt yourapp lt  title gt           lt link rel  stylesheet  href  css http-error-handling css   gt       lt  head gt       lt body gt    lt  -- Display top tab menu -- gt   lt ul class  menu  gt     lt li gt  lt a href    user  gt Users lt  a gt  lt  li gt     lt li gt  lt a href    vendor  gt Vendors lt  a gt  lt  li gt     lt li gt  lt logout-link  gt  lt  li gt   lt  ul gt    lt  -- Display errors -- gt   lt div class  http-error-messages  http-error-messages gt  lt  div gt    lt  -- Display partial pages -- gt   lt div ng-view gt  lt  div gt    lt  -- Include all the js files  In production use min js should be used -- gt   lt script src  lib angular114 angular js  gt  lt  script gt   lt script src  lib angular114 angular-resource js  gt  lt  script gt   lt script src  lib http-error-handling js  gt  lt  script gt   lt script src  js app js  gt  lt  script gt   lt script src  js services js  gt  lt  script gt   lt script src  js controllers js  gt  lt  script gt   lt script src  js filters js  gt  lt  script gt       lib ea-basic-auth-login js  Nearly same can be done for the login  Here you have the answer to the redirect   location path   login             ngdoc overview    name ea-basic-auth-login    description     Module that provides http basic authentication for apps      Usage    Hook the file in to your index html   lt script src  lib ea-basic-auth-login js  gt    lt  script gt    Place  lt ea-login-form  gt  tag in to your html login page   Place  lt ea-logout-link  gt  tag in to your html page where the user has to click to logout     function      use strict   angular module  ea-basic-auth-login     ea-base64-login         config    httpProvider   function   httpProvider            var ea basic auth login interceptor      location     q   function  location   q                function success response                    return response                             function error response                    if response status     401                         location path   login                        return  q reject response                                     else                       return  q reject response                                                return function promise                    return promise then success  error                                      httpProvider responseInterceptors push ea basic auth login interceptor                controller  EALoginCtrl      scope    http    location   EABase64Login   function  scope   http   location  EABase64Login             scope login   function                  http defaults headers common  Authorization      Basic     EABase64Login encode  scope email          scope password                location path   user                         scope logout   function                  http defaults headers common  Authorization     undefined               location path   login                            directive  eaLoginForm    function             return               restrict     E               template      lt div id  ea login container  ng-controller  EALoginCtrl  gt                               lt form id  ea login form  name  ea login form  novalidate gt                               lt input id  ea login email field  class  ea login field  type  text  name  email  ng-model  email  placeholder  E-Mail   gt                               lt br  gt                               lt input id  ea login password field  class  ea login field  type  password  name  password  ng-model  password  placeholder  Password   gt                               lt br  gt                               lt button class  ea login button  ng-click  login    gt Login lt  button gt                               lt  form gt                               lt  div gt                replace  true                         directive  eaLogoutLink    function             return               restrict   E               template    lt a id  ea-logout-link  ng-controller  EALoginCtrl  ng-click  logout    gt Logout lt  a gt                replace  true                     angular module  ea-base64-login            factory  EABase64Login   function             var keyStr    ABCDEFGHIJKLMNOP                 QRSTUVWXYZabcdef                 ghijklmnopqrstuv                 wxyz0123456789                                return               encode  function  input                    var output                       var chr1  chr2  chr3                       var enc1  enc2  enc3  enc4                       var i   0                   do                       chr1   input charCodeAt i                         chr2   input charCodeAt i                         chr3   input charCodeAt i                          enc1   chr1  gt  gt  2                      enc2     chr1  amp  3   lt  lt  4     chr2  gt  gt  4                       enc3     chr2  amp  15   lt  lt  2     chr3  gt  gt  6                       enc4   chr3  amp  63                       if  isNaN chr2                             enc3   enc4   64                        else if  isNaN chr3                             enc4   64                                             output   output                           keyStr charAt enc1                            keyStr charAt enc2                            keyStr charAt enc3                            keyStr charAt enc4                       chr1   chr2   chr3                           enc1   enc2   enc3   enc4                         while  i  lt  input length                    return output                              decode  function  input                    var output                       var chr1  chr2  chr3                       var enc1  enc2  enc3  enc4                       var i   0                      remove all characters that are not A-Z  a-z  0-9        or                   var base64test      A-Za-z0-9        g                  if  base64test exec input                         alert  There were invalid base64 characters in the input text  n                             Valid base64 characters are A-Z  a-z  0-9           and     n                             Expect errors in decoding                                       input   input replace    A-Za-z0-9        g                        do                       enc1   keyStr indexOf input charAt i                          enc2   keyStr indexOf input charAt i                          enc3   keyStr indexOf input charAt i                          enc4   keyStr indexOf input charAt i                           chr1    enc1  lt  lt  2     enc2  gt  gt  4                       chr2     enc2  amp  15   lt  lt  4     enc3  gt  gt  2                       chr3     enc3  amp  3   lt  lt  6    enc4                       output   output   String fromCharCode chr1                        if  enc3    64                            output   output   String fromCharCode chr2                                             if  enc4    64                            output   output   String fromCharCode chr3                                              chr1   chr2   chr3                           enc1   enc2   enc3   enc4                          while  i  lt  input length                    return output

User · Answer

Here is maybe a more elegant and flexible solution with  resolve  configuration property and  promises  enabling eventual data loading on routing and routing rules depending on data   You specify a function in  resolve  in routing config and in the function load and check data  do all redirects  If you need to load data  you return a promise  if you need to do redirect - reject promise before that  All details can be found on  routerProvider and  q documentation pages    use strict    var app   angular module  app            config    routeProvider   function  routeProvider             routeProvider              when                        templateUrl   login html                   controller  LoginController                             when   private                     templateUrl   private html                   controller  PrivateController                  resolve                        factory  checkRouting                                               when   private anotherpage                     templateUrl  another-private html                   controller  AnotherPriveController                  resolve                        factory  checkRouting                                               otherwise   redirectTo                    var checkRouting  function   q   rootScope   location        if   rootScope userProfile            return true        else           var deferred    q defer             http post   loadUserProfile     userToken   blah                  success function  response                     rootScope userProfile   response userProfile                  deferred resolve true                               error function                      deferred reject                     location path                                return deferred promise             For russian-speaking folks there is a post on habr                               AngularJS

User · Answer

routeProvider   when   main     templateUrl   partials main html    controller  MainController     when   login    templateUrl   partials login html   controller  LoginController      when   login    templateUrl   partials index html   controller  IndexController     otherwise  redirectTo    index

User · Answer

1  Set global current user   In your authentication service  set the currently authenticated user on the root scope      AuthService js       auth successful    rootScope user   user   2  Set auth function on each protected route      AdminController js   config function   routeProvider       routeProvider when   admin         controller   AdminController       auth  function  user          return user  amp  amp  user isAdmin                 3  Check auth on each route change      index js   run function   rootScope   location       rootScope  on   routeChangeStart   function  ev  next  curr        if  next   route          var user    rootScope user       var auth   next   route auth       if  auth  amp  amp   auth user      location path                        Alternatively you can set permissions on the user object and assign each route a permission  then check the permission in the event callback

User · Answer

Here s how I did it  in case it helps anyone   In the config  I set a publicAccess attribute on the few routes that I want open to the public  like login or register     routeProvider      when                templateUrl   views home html           controller   HomeCtrl              when   login             templateUrl   views login html           controller   LoginCtrl           publicAccess  true          then in a run block  I set a listener on the  routeChangeStart event that redirects to   login  unless the user has access or the route is publicly accessible   angular module  myModule   run function  rootScope   location  user   route         var routesOpenToPublic           angular forEach  route routes  function route  path               push route onto routesOpenToPublic if it has a truthy publicAccess value         route publicAccess  amp  amp   routesOpenToPublic push path                  rootScope  on   routeChangeStart   function event  nextLoc  currentLoc            var closedToPublic    -1     routesOpenToPublic indexOf  location path              if closedToPublic  amp  amp   user isLoggedIn                   location path   login                           You could obviously change the condition from isLoggedIn to anything else    just showing another way to do it

User · Answer

I have been trying to do the same  Came up with another simpler solution after working with a colleague  I have a watch set up on  location path    That does the trick  I am just starting to learn AngularJS and find this to be more cleaner and readable    scope  watch function     return  location path       function newValue  oldValue         if   scope loggedIn    false  amp  amp  newValue      login                   location path   login

User · Answer

If you do not want to use angular-ui-router  but would like to have your controllers lazy loaded via RequireJS  there are couple of problems with event  routeChangeStart when using your controllers as RequireJS modules  lazy loaded    You cannot be sure the controller will be loaded before  routeChangeStart gets triggered -- in fact it wont be loaded  That means you cannot access properties of next route like locals or   route because they are not yet setup  Example   app config    routeProvider   function  routeProvider         routeProvider when   foo             controller   Foo           resolve                controller     q   function  q                    var deferred    q defer                    require   path to controller Foo    function Foo                           now controller is loaded                     deferred resolve                                        return deferred promise                                         app run    rootScope   function  rootScope         rootScope  on   routeChangeStart   function event  next  current            console log next   route  next locals      undefined  undefined                This means you cannot check access rights in there   Solution   As loading of controller is done via resolve  you can do the same with your access control check   app config    routeProvider   function  routeProvider         routeProvider when   foo             controller   Foo           resolve                controller     q   function  q                    var deferred    q defer                    require   path to controller Foo    function Foo                           now controller is loaded                     deferred resolve                                        return deferred promise                              access     q   function  q                    var deferred    q defer                    if     some logic to determine access is granted                           deferred resolve                      else                       deferred reject  You have no access rights to go there                                      return deferred promise                                          app run    rootScope   function  rootScope         rootScope  on   routeChangeError   function event  next  current  error            console log  Error      error       Error  You have no access rights to go there                 Note here that instead of using event  routeChangeStart I m using  routeChangeError

User · Answer

After some diving through some documentation and source code  I think I got it working  Perhaps this will be useful for someone else   I added the following to my module configuration   angular module        config     routeProvider   function  routeProvider             run  function  rootScope   location            register listener to watch route changes      rootScope  on    routeChangeStart   function event  next  current          if    rootScope loggedUser    null                no logged user  we should be going to  login         if   next templateUrl     partials login html                   not going to  login  we should redirect now            location path    login                                              The one thing that seems odd is that I had to test the partial name  login html  because the  next  Route object did not have a url or something else  Maybe there s a better way

User · Answer

A different way of implementing login redirection is to use events and interceptors as described here   The article describes some additional advantages such as detecting when a login is required  queuing the requests  and replaying them once the login is successful   You can try out a working demo here and view the demo source here

[angularjs] Redirecting to a certain route based on condition

Examples related to angularjs

Examples related to ngroute