I've developed a single-page application using angularjs, UI-Router, and nested views. The structure of my code is as follows:
app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider' ,'$mdDateLocaleProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $httpProvider, $mdDateLocaleProvider, $locationProvider) {
var rootpath = config.paths.components;
$stateProvider.state('home', {
url: '/',
views: {
index: {
templateUrl: rootpath + '_root/template.html',
controller: "RootController"
},
"header@home": {
templateUrl: rootpath + 'header/header-template.html',
controller: "HeaderController"
},
"sidebar@home": {
templateUrl: rootpath + 'sidebar/sidebar-template.html',
controller: "SidebarController"
},
"main@home": {
templateUrl: rootpath + 'main/main-template.html',
controller: "MainController"
}
},
resolve: {
authorize: ['RootService', function (RootService) {
var auth = RootService.getKey();
return RootService.getConfig(auth.key);
}]
},
});
$urlRouterProvider.otherwise('/');
}]).run(['$rootScope', '$state', '$window', function($rootScope, $state, $window){
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
$window.location = error.status +'.html';
});
Within the "home" state, I check the validity of the authentication key through a resolve process.
If the key expires or becomes invalid, the $stateChangeError event handles the redirection to an error page.
While this mechanism works on initial load and refresh, it fails to catch errors when the key has expired without reloading the application.
I am seeking advice on how to address this issue effectively.