The promise of Angular resolve has been declined, yet the page persists in its loading state

I'm experiencing a strange issue with the resolve function that seems to only affect the profile page. Despite the promise being rejected, the profile page continues to load after authentication steps are completed and the user is logged out. This causes errors as the authentication data has been cleared.

If anyone has insight on why this might be happening or needs more information, please let me know.

app.config('$routeProvider')

.when('/profile', {
    templateUrl: '/templates/profile.html',
    controller: 'ProfileController',
    resolve: {
        auth: function (SessionService) {
            SessionService.resolve()
        }
    }
}).
otherwise({
    redirectTo: '/login'
})

function resolve () {
    if (self.isAuthenticated()) {
        return $q.when({auth: true})
    } else {
        $q.reject({auth: false})
            self.logout() // execution starts here
        }   
    }
}

function logout () {
    var auth = self.storage()
    if (...) {
       ...
    } else {
        self.clearUserAuthentication() // then moves here
        $location.path('/login') // even though it redirects here, the profile controller still initializes
    }
}

Answer №1

/user route will always resolve because the authentication function always returns a resolved promise (or to put it more accurately: it does not return a rejected promise or throw an exception). To correct this, make sure to include:

.when('/user', {
    templateUrl: '/templates/user.html',
    controller: 'UserController',
    resolve: {
        authentication: function (AuthService) {
            return AuthService.authenticate()
        }
    }
}).

It is crucial that the authentication handler returns a promise. If you forget to use the return keyword, it will result in an implicit return undefined, which is considered a resolved promise even though it is meaningless.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The React Native File generator

Currently, we are utilizing redux actions in our web project. In an effort to share logic between web and native applications, we have integrated these actions into our react native project with the intention of only having to modify the components. One o ...

Ways to show div1 when hovering over div2 and make div1 fade out when the mouse moves away?

I'm looking to create an effect where div1 appears when hovering over div2, and only disappears when neither div1 nor div2 are being hovered over. I attempted to achieve this using CSS and jQuery, but encountered an issue where div1 would disappear i ...

What is the best way to delete the onclick event of an anchor element?

Struggling to remove the onclick attribute using jQuery? Here's my code: function getBusinesses(page){ if(page==0){ alert("you are already on First Page"); $("#previous a").removeAttr("onclick ...

Designing a dynamic webpage using JavaScript to seamlessly display the latest updates in real-time

I am interested in developing a web page that enables users to input new data and perform calculations without refreshing the entire page. I prefer a table format for simplicity, but ease of coding is also important. What would be the most efficient approa ...

Showing the precise age in years by utilizing the provided 'Date of Birth' selected from the datePicker

Is it possible to retrieve the date entered in the datePicker and use it to populate the current age field in a PHP file using either PHP or Javascript? if ($key == 'currentage') { $group[] = $this->form->createEleme ...

How can I control the direction of a CSS change when hovering using JavaScript?

When you hover over the green section in the code snippet below, the height of the two red boxes will change. However, the height currently expands downwards. Is there a way to make the height expand upwards instead? CSS: .one{ position: absolute; ...

Retrieve the properties of an object

I have a JavaScript program where I retrieve values from a JSON file and store them in an array. However, when I attempt to access the elements of this array, it returns nothing. Below is the function that pushes temperatures: temperatures = [] get_info ...

Troubleshooting Variable Issues in PHP and JavaScript

On my PHP page, I have a while loop where I am retrieving the following... print $divLeft.strip_tags($row->twitterUser)."?size=normal\"/><br \/>".$row->twitterUser.$divRight."<a href='javascript:void(0);' id=&apos ...

Modify the scoped variable using Angular's $resource module

I am facing an issue with my Angular application where I cannot get the results of a second $resource call to update a scoped variable. Initially, I am able to generate the initial view from an Angular $resource call to an external API and display the data ...

to streamline the process of navigating Google Chrome web pages

Is it possible to create automation in Google Chrome that can complete the following tasks: 1. Input a job name to monitor 2. Periodically click a refresh button on the webpage (not the refresh button for the entire Chrome page in the left corner) 3. Open ...

Update all items in the menu to be active, rather than only the chosen one

Here is the layout of my menu along with the jQuery code included below. The functionality is such that when I click on Home Page, its parent element (list item) receives an active class. Currently, when I am on the Home Page, the list item for Account Co ...

content inside a span tag using the ng-bind directive is invisible

Here is my issue. <span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}"> <span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span> </span> Within my controller, the getToolTip() fu ...

Retrieve a targeted table from a webpage through Ajax refresh

On a webpage, I have a table that has two different views: simple and collapsible. I want to be able to toggle between these views using a button click without the need to refresh the entire page. Below is the code snippet I am currently using: $(&apo ...

Attempted to incorporate a text input into the header of every column within a table using Jquery

Struggling to have a text input appear below the header span as desired, encountering some unexpected behavior - The feature seems to not be functioning properly. I previously implemented this in C# and now need to transition it to clientside due to speci ...

Your request must be a POST method and only absolute URLs are allowed

I have created a client-side app.js file that makes a post request to a server (code provided below): const fetch = require('node-fetch'); /* Function for POSTing data */ const postData = async ( url = 'http://localhost/8000/add ...

Securing a REST API accessible through JavaScript by implementing authentication techniques due to the visibility of the public code

Inquiry: Need advice on securing an internal API intended for AJAX calls made within the website. I have developed a REST API in PHP 7.2 for use with client-side Javascript. Typically, I work on server-side applications where I can control access using a ...

Disabling modifications caused by enabling dark mode settings and plugins

After creating a website with a dark theme, I noticed that plugins like 'dark reader' and the built-in night mode of Kiwi browser on mobile are altering the colors of certain elements and removing gradient effects. Is there a way to prevent these ...

Encountering an error when mapping a list using a function and clicking on it reads: "The property 'value' cannot be read as it is undefined."

Attempting to map a list using a function outside of the render() function in React results in an error that states "Cannot read property 'value' of undefined." The function includes a div with an onClick attribute and an assigned function. He ...

Creating HTML elements dynamically in ASP.NET MVC on the server-sideWould you like a hand with

Is there a way to generate HTML components on the server side of ASP.NET MVC or in the controller? Currently, my approach involves generating an HTML table in a controller function which returns a string of HTML table code. Then, I make an AJAX call to th ...

Do promises within an array begin execution only when they are passed to Promise.all()?

When an array of promises is built and then passed to the Promise.all method, does execution start immediately or only once Promise.all is called? Consider the following code snippet: let promises: Promise<string> [] = [this.methodCall(), this.meth ...