0

I would like to show a toast before redirect to login. In my case I have this code in my interceptor:

'use strict';
 angular.module('frontEndApp')
 .config(['$provide', '$httpProvider', function ($provide, $httpProvider, 
 $translate, toastr, CONST) {
    $provide.factory('unauthorisedInterceptor', ['$q', function ($q) {
        return {
            'responseError': function (rejection) {
                if (rejection.status === (401)) {
                    window.location.href = '/#/login';
                }
                if (rejection.status === (405)) {
                    window.location.href = '/#/login';
                    $translate('createsuccess')
                        .then(function (translatedMessage) {
                            toastr.success(translatedMessage, {
                                'timeOut': CONST.TOAST.timeOut,
                                'extendedTImeout': CONST.TOAST.extendedTImeout,
                                'progressBar': CONST.TOAST.progressBar,
                                'closeButton': CONST.TOAST.closeButton,
                                'showMethod': CONST.TOAST.showMethod,
                                'hideMethod': CONST.TOAST.slideUp
                            });
                        });
                }
                return $q.reject(rejection);
            }

        };
    }]);
    $httpProvider.interceptors.push('unauthorisedInterceptor');
}]);

I would like to show to the user why they are redirecitng to the login page...

Can you help me, The toastr doesn't appear.

Miguel-Ángel
  • 57
  • 2
  • 11

1 Answers1

0

Use the location service to re-route the request as I assume you're using ngRoute. Using the window.location.href you are causing the browser to do a get request and reload the entire page, not utilizing angular's routing.

'use strict';
 angular.module('frontEndApp')
 .config(['$provide', '$httpProvider', function ($provide, $httpProvider, 
 $translate, toastr, CONST) {
    $provide.factory('unauthorisedInterceptor', ['$q', '$location', function ($q, $location) {
        return {
            'responseError': function (rejection) {
                if (rejection.status === (401)) {
                    $location.url('/login');
                }
                if (rejection.status === (405)) {
                    $location.url('/login');
                    $translate('createsuccess')
                        .then(function (translatedMessage) {
                            toastr.success(translatedMessage, {
                                'timeOut': CONST.TOAST.timeOut,
                                'extendedTImeout': CONST.TOAST.extendedTImeout,
                                'progressBar': CONST.TOAST.progressBar,
                                'closeButton': CONST.TOAST.closeButton,
                                'showMethod': CONST.TOAST.showMethod,
                                'hideMethod': CONST.TOAST.slideUp
                            });
                        });
                }
                return $q.reject(rejection);
            }

        };
    }]);
    $httpProvider.interceptors.push('unauthorisedInterceptor');
}]);
Dillon
  • 687
  • 6
  • 9
  • Gives me TypeError: Cannot set property 'href' of undefined – Miguel-Ángel Jun 25 '18 at 15:13
  • @Miguel-Ángel I edited the answer to remove the hash, you need to make it match your defined routes in your routeProvider. I assume it's likely '/login' – Dillon Jun 25 '18 at 15:19
  • $location.url('/login'); gives me angular.js:14700 TypeError: Cannot read property 'url' of undefined. I'm using angularjs 1.6.6. Thanks for your help – Miguel-Ángel Jun 25 '18 at 16:06
  • @Miguel-Ángel make sure that you are injecting it correctly on this line $provide.factory('unauthorisedInterceptor', ['$q', '$location', function ($q, $location) { – Dillon Jun 25 '18 at 16:48