When using $state.go in $stateChangeStart, there is a dual state transition in ui-router

Take a look at my Plunker. When you click on the profile link and examine the list of state changes:

stateChanges = [
  " -> home",
  "home -> profile",
  "home -> signIn",
  "signIn -> signIn"
]

You'll notice an unexpected extra state change "signIn -> signIn".

After some debugging, it seems that this is caused by ui-router's reaction to $locationChangeSuccess through the afterLocationChange function. I'm not sure if this is a bug in ui-router or a result of how I've configured ui-router and handle redirections. If it's something on my end, how can I resolve it?

Your assistance would be greatly appreciated, as the double state change leads to my query parameters being doubly URL encoded: 

/profile -> %2Fprofile -> %252Fprofile
instead of just the first two.

UPDATE

It appears that this issue arose with version 0.2.15. I tested older releases and even 0.2.14 works without any problems. Upon further investigation, I discovered that the problem originated from commit 48aeaff. By uncommenting the code that was commented out in that commit, the issue is resolved even in version 0.2.15. For now, I will utilize this modified version of 0.2.15.

I also noticed that there is an open issue for this in ui-router's issue tracker: #1573.

javascriptangularjsangular-ui-router

Answer №1

It appears that the issue stems from the Querystring included in your $stateProvider

Check out the plunkr Demo for more information.

    .state("signIn", {
        parent: "frontpage",
        url: "/signIn?returnTo", // <--- Try removing the ?returnTo
        authorized: false,
        views: {
            "main@frontpage": {
                template: "sign in page"
            }
        }
    })

If you change it to simply /signIn, it should work as expected. It's possible that using ?queryStrings in your stateProvider definitions may not be supported.

        url: "/signIn" // This should resolve the issue

Answer №2

While reviewing your code, I came across the following section:

else if (authorized === true)
        {
            if (!service.authentication.authorized) {
                $state.go("signIn", {
                    returnTo: toState.url
                });
            }
        }

When navigating from the Home page to the Profile page, it was noticed that authorized = true, but service.authentication.authorized = false. This resulted in attempting to navigate to the signIn state when actually trying to access the Profile page, causing the browser to remain on the same state.

After removing the event.preventDefault(); statement from the above block, the functionality improved.

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

Stay ahead of the game with IntelliJ's automatic resource updating feature

In my development process, I rely on IntelliJ IDEA to work on an AngularJS application with a Java back-end. The HTML/JS files are served from Tomcat. Usually, whenever I make changes to an HTML or JS file, I press CMD+F10, select Update resources, and th ...

angularjstomcatintellij-idea

Beginner Query: What is the method for retrieving this data in JavaScript?

I'm struggling with accessing a specific value in an Object in JavaScript for the first time. The JSON I'm working with is structured like this: { "payload":{ "params":{ "switch:0":{ &q ...

javascriptjsonnode-redshelly

Expanding the size of a JavaScript array by adding fields

I have extended the JS array prototype by adding a "max" field. However, I am encountering difficulties in displaying this addition when stringifying the array. Despite attempting to modify the toJSON function, my efforts have been unsuccessful. Array.pro ...

javascriptarraysprototypejsto-json

Transferring JSON information from Express to Backbone

I have developed a basic Backbone application and am trying to integrate JSON data from a MYSQL database using an Express server. However, when I make a GET request with Express to fetch data for Backbone, the html template in Backbone disappears, leaving ...

javascriptjsonnode.jsbackbone.jsexpress

Angular: Keeping all FormControls in sync with model updates

I am dealing with a collection of FormControls that were created using FormBuilder: this.someForm = this.fb.group({ name: '', size: '', price: '', }); Is there an alternative method to update them based on ...

javascriptangularangular-forms

What is the best method for automatically closing the modal window?

I implemented a modal window on my website. Within the modal, there is a green button labeled "Visit" which triggers the "Bootstrap Tour". I aim for the modal to automatically close when the tour starts. To access this feature on my site, users need to ...

javascripthtmltwitter-bootstrapbootstrap-4bootstrap-modal

Error: A surprise 'dot' token was found while defining the function

As part of my API development, I'm working on creating a register route. However, I encountered an issue when trying to utilize the User.function - AddUser method from my model file. The error message mentions an unexpected token .. Below is the code ...

javascriptexpressmongoose

Looking to improve query performance on MongoDB using mongoskin - should you use a single query or

this relates to mongodb {cod_com:'WWWOAN', cod_prod[{prod:'proda',info:'hello world'},{prod:'pacda',info:'hello world'},{prod:'prcdb',info:'hello world'}] } {cod_com:'WWWOA2&a ...

javascriptnode.jsmongodbmongoskinnosql

Deactivate Mongoose connection in Node.js after completing tasks

Here is a mongoose script I have been using to connect to the local database and perform some operations. However, I am facing an issue with disconnecting the connection after use. const mongoose = require('mongoose'); const db = mongoose.connec ...

javascriptnode.jsmongodbmongoose

How to prevent AngularJS UI Router from reloading the previous page when using the "Link to Previous Page" feature

Currently, I am utilizing Angular UI-ROUTER to smoothly transition between two different routes. Specifically, my journey takes me from Page 1 to Page 2. Within Page 2, there is a convenient link labeled "return to previous page". My expectation is that on ...

angularjsangular-ui-router

Steps for building JSX with a loop

Recently diving into the world of React and Javascript, I've been attempting to assemble a JSX 'tree' dynamically using a loop rather than hard-coding the data. However, I find myself facing a hurdle where Visual Studio Code insists on havi ...

javascriptreactjs

Is it possible to duplicate the mesh thousands of times and animate it without causing significant performance issues

I have created a demo with numerous cubes that share the same geometry and texture: texture = THREE.ImageUtils.loadTexture ... material = new THREE.MeshLambertMaterial( map: texture ) geometry = new THREE.BoxGeometry( 1, 1, 1 ) cubes = [] for i in [0..1 ...

javascript3dthree.jswebgl

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Currently, I am working on a project where I aim to develop a customized feature in ng-select. This feature will enable the text entered in ng-select to be appended to the binding item and included as part of the multiselect function. If you want to see a ...

javascripthtmlangulartypescriptangular-ngselect

Configuring git npm dependencies to aid in debugging purposes

This is my first time trying to debug a library in my application and I'm not entirely sure how to go about it. I initially installed the library with npm install @react-pdf/renderer, but debugging was proving difficult. Then, I found a useful answer ...

javascriptnode.jsgitnpmwebpack

Efficiently pinpointing the <div> element with precision using jQuery

I am building an interactive quiz for users of my app. The questions are table based, and can be answered "yes," "no," or "maybe." If the user answers "no" or "maybe," I would to slide open an informational panel that lives beneath the table. Here is the ...

javascriptjqueryhtml

I can't seem to figure out why my characters keep disappearing from the HTML string when I attempt to dynamically add HTML using JavaScript

I am currently facing an issue with dynamically adding links to a page. The links are being added successfully, however, the '[' and ']' at the beginning and end of the line are disappearing. Here is the code snippet from my .js file: ...

javascriptjquery

What steps should I take to ensure that Vim properly formats the indentation for this JavaScript code?

Currently an Emacs user, but trying out Vim for a change. :) I'm really enjoying the quick keystrokes and the overall philosophy of Vim, however I've been running into some issues with the more advanced features. One problem I'm having is w ...

javascriptvimindentationauto-indent

Get the PDF document via FTP by utilizing an XMLHttpRequest and a generic handler

Attempting to download a PDF file from an FTP server using a JQuery Ajax request. The reference used was found at . Below is the Jquery ajax call being made: $.ajax({ xhr: function () { var xhr = new window.XMLHtt ...

javascriptc#jqueryasp.netajax

The modal is not displayed when the on click listener is triggered

I'm a beginner in the world of programming and I'm currently working on creating modals that pop up when clicked. However, I'm facing an issue where the pop-up message doesn't appear when I click the button. Oddly enough, only the overl ...

javascripthtmlcss

Fixed bar on top, revealed only when the scroll attempts to conceal it

I have placed a menu on the top section of my website, but not at the very top. I would like it to stick to the top of the page when the user scrolls down and disappears from view. However, if the title is still visible, I want the menu to remain below it ...

javascriptcss