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

Having trouble finding module: Unable to locate 'fs' - yet another hurdle with NextJS

Trying to access a JSON file located one directory above the NextJS application directory can be tricky. In a standard JavaScript setup, you might use the following code: var fs = require('fs'); var data = JSON.parse(fs.readFileSync(directory_pat ...

javascriptnext.js

Can a link be generated that swaps out the original URL redirect for the following visitor upon clicking?

Can the program be fed with a list of links to automatically redirect to the next URL once clicked? In this setup, each visitor would only see one link and not have access to any other URLs in the chain. Is there a way to make this happen? Any suggestion ...

javascriptpython

AngularJS application is throwing an error indicating provider $q is not recognized

Could someone please advise on what might be the issue with my code snippet below: var app = angular.module('app', [ 'angular-cache', 'angular-loading-bar', 'ngAnimate', 'ngCookies', &a ...

javascripthtmlangularjs

jQuery script unable to alter img src in Firefox and IE browsers

I am working with an image and a jQuery script to change the captcha image. <img src="captcha.jpg" id="my-image"/> The jQuery script is as follows: <script> $(document).ready($("#my-image").click(function(){ $('#my-image&ap ...

javascriptjqueryspring-mvc

Utilizing the map function to display elements from a sub array

I'm struggling to print out the comments using the map function in this code: class Postcomment2 extends React.Component { uploadcomment = () => { return this.props.post.comments.map((comment) => { return <div>{comment["comment"]}< ...

javascripthtmlreactjsdatabasedictionary

Determine in React whether a function returns a true value, and execute the code for false regardless

I have a hunch that this is related to the concept of asynchronicity. Essentially, I'm trying to validate whether a string (an answer to a question) already exists. If it does, the page should just show a message; otherwise, it should add the new que ...

javascriptreactjsif-statementjsxboolean-logic

What steps are involved in implementing Local fonts in theme UI for Next JS?

I am currently developing an application using next JS with [theme-UI][1]. However, I need to implement local or custom fonts in my project and I'm unsure of how to do this. Below is the current theming setup: const theme = { fonts: { ...

javascriptreactjsnext.jstheme-ui

Look into the data with vue.js, but there's not much

1. As a newcomer to vue.js, I encountered some surprising issues while experimenting with examples. The first one arose when I assigned an id to the body tag and included the following JavaScript code: <html> <head> <meta charset="utf-8 ...

javascriptvue.js

Is AngularJS compatible with Mozilla Firefox version 3.0.11?

Can anyone confirm if the AngularJS is compatible with Mozilla Firefox version 3.0.11? I have built an application using AngularJS, but it's not functioning properly in this particular browser version. Could you please advise on the minimum version of ...

angularjs

Error message malfunction on the Express.js server side

Here is the server-side POST code that I am using. Before saving my task to the database, I am trying to find data in the database using a unique value called service. However, when I run this code, the console displays an error: ReferenceError: service is ...

javascriptnode.jsexpress

Exploring the Depths of React by Cycling Through Arrays in Tabular Format

One issue I'm facing is that I have an array named paymentMethods which I'd like to iterate through in tabs. However, I seem to be struggling with the iteration part. To take a closer look at my code, please visit my codesandbox HERE <div& ...

javascriptreactjsarraysecmascript-6material-ui

Ways to simultaneously apply fade in and fade out effects using CSS

body { background-image: url("background.jpg"); background-attachment: fixed; font-family: 'Roboto', sans-serif; color: #333333; } #container { height: 1000px; } /* HEADER WITH NAVIGATION BAR AND LOGIN OPTION */ #head { position: abso ...

javascriptjqueryhtmlcss

What are some ways to create a versatile wrapper?

I'm currently grappling with an issue involving my Formik fields. I need to utilize FastFields in certain scenarios and Fields in others within my FormikControl, a class designed for constructing formik inputs. The challenge lies in being able to swit ...

javascriptreactjsmaterial-uiformik

Unable to retrieve the $onAuth property with angularfire

I am currently working on integrating firebase auth into my app. The login controller is functioning properly, but I am facing an issue where the user gets logged out immediately after logging in. .controller('LoginCtrl', function ($scope, $loca ...

angularjsfirebaseangularfirefirebase-authentication

The precompilation of Handlebars using Node.js encounters issues on Cloud9

I'm currently using the handlebars template precompiler for express, specifically this one, to precompile my templates in nodejs. While everything runs smoothly locally, I've encountered some issues when trying to do the same on Cloud9 IDE (Clou ...

javascriptnode.jshandlebars.jscloud9-idepre-compilation

Incorporating external script into React website's functional component

I have invested countless hours on this particular issue, which appears to be quite trivial, yet I am unable to pinpoint where my mistake lies. I recently purchased terms and conditions from Termly.com and now wish to showcase these terms and conditions o ...

javascriptreactjsreact-scripts

What methods can be employed to execute a intricate substitution utilizing both javascript and jQuery?

Within the source code of my web pages, I have elements that resemble the following: <div id="opt_3" >A)</div> <div id="opt_2" >B)</div> <div id="opt_4" >C)</div> <div id="opt_5" >D)</div> <div id="op ...

javascriptjquery

Having difficulty locating audio files within a Next.js project

I am facing challenges when trying to import my audio files into a redux slice. Currently, I am attempting to retrieve my audio files from the app > public > audio directory. I have made efforts to access my audio files through 2 different director ...

javascriptreactjsnext.jsaudioredux

Could my reliance on useEffect be excessive? - Sorting through information based on the latest search criteria

My main goal was to implement a feature where users can filter data by clicking on checkboxes. The filtered data should persist even after a refresh. I have two components in place for this functionality: ShopPlants, responsible for displaying and filterin ...

javascriptreactjsnext.jsreact-hooks

What could be causing an error with NextJS's getStaticPaths when running next build?

When attempting to use Next.js's SSG with getStaticPaths and getStaticProps, everything worked fine in development. However, upon running the build command, an error was thrown: A required parameter (id) was not provided as a string in getStaticPath ...

javascripttypescriptnext.jsstatic-site