Vue.js displaying the error message: "The maximum size of the call stack has been exceeded"

Could you assist me in resolving this issue?

router.js

routes: [{
  path: "",
  component: () => import("@/layouts/full-page/FullPage.vue"),
  children: [{
    path: "/pages/login",
    name: "page-login",
    component: () => import("@/views/pages/Login.vue")
  }, {
    path: "/pages/signup",
    name: "page-signup",
    component: () => import("@/views/pages/Signup.vue")
  }, {
    path: "/pages/error-404",
    name: "page-error-404",
    component: () => import("@/views/pages/Error404.vue")
  }]
}, {
  path: "*",
  redirect: "/pages/error-404"
}]

Furthermore, the following code snippet is causing the error:

router.beforeEach((to, from, next) => {
  if (to.path != "/pages/login") {
    if (auth.isAuthenticated()) {
      next();
    } else {
      if(to.path == "/pages/signup") {
        next("/pages/signup");
      }else{
        next("/pages/login");
      }
    }
  } else {
    next();
  }
});

An error occurs consistently when opening pages/signup, with the console displaying the message:

"RangeError: Maximum call stack size exceeded"

Answer №1

Avoiding an infinite loop:

if(to.path == "/pages/signup") {
        next("/pages/signup");

Instead of redirecting to the same route, leading to a repetitive cycle triggering the beforeEach function multiple times, modify the code like this:

if(to.path == "/pages/signup") {
        next();

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

Tips on choosing and retrieving the value of filled text area fields using jQuery

I am struggling with selecting non-empty textareas and retrieving their values using jQuery. Here is a snippet of my code: <div class="item"> <textarea class="col-sm-10 comment">TextArea1</textarea> </div> <d ...

Unable to set two image layers on HTML canvas to display in different colors as anticipated

I am facing a challenge with stacking 3 images: an outline, a white base, and a pattern that is also white. My goal is to layer these images where the base is at the bottom with one color assigned to it, the pattern is stacked on top with a different color ...

What is the best way to ensure a DOM element exists before you can start manipulating it?

In my AngularJS application, I am utilizing Angular Material and md-select. When a user clicks on the md-select, a dropdown list appears and an overlay with the tag Name is added to the DOM. My goal is to add a class or style as soon as the user clicks on ...

Running multiple controller functions in nodejs can be achieved by chaining them together in the desired

Currently, I am working on the boilerplate code of mean.io and adding a password reset email feature to it. Whenever a user requests a password reset with their email as a parameter, I generate a unique salt (resetid) and send them an email with a link con ...

When utilizing Express, only the index.html page is rendered, all additional pages

I've set up an express app specifically for serving static HTML files. let express = require('express'); let path = require('path'); let cookieParser = require('cookie-parser'); let logger = require('morgan'); ...

The client is not displaying any events on the full calendar

I am currently working on creating a unique calendar display that showcases all the weekdays and events, regardless of the specific day in a month. The dates extracted from the database may seem "random", but in my C# code, I have devised a method to map e ...

Encountering a Typescript error while attempting to extract state from a History object containing an enum property

My enum structure is as follows: enum values { first, second, } Within my component, I handle the history object like this: const { push, location: { state = {} } } = useHistory(); Additionally, in the same component within a useEffect hook, I have ...

What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series ...

`Turn nested JSON into a formatted list using jquery`

I am currently facing two challenges: I am having trouble with the HTML structure, as shown in the image below Current HTML structure: https://i.stack.imgur.com/GH46J.png Desired HTML structure: https://i.stack.imgur.com/Dq3Gn.png How can I create d ...

Upon executing `$('div')`, an empty array is returned

My goal is to retrieve all the div classes on a page using jQuery $('div');. However, the page does not natively support jQuery, so I am loading it through external links until $ === jQuery evaluates to true. Even on Stack Overflow where jQuery ...

Obtain information using AJAX calls with jQuery Flot

Having an issue with jQuery Flot that I need help resolving. PHP output (not in JSON format): [[1, 153], [2, 513], [3, 644]] ~~ [[1, 1553], [2, 1903], [3, 2680]] Here is the jQuery call: $.ajax({ url: 'xxx.php', success: function (dat ...

Triggering a parent component function after a child component function finishes in Vue

When using Vue, I have a main component housing a child component that is loaded onto the page with a button triggering the saveTaskComment() function. Everything works perfectly until it reaches the .finally portion of the child component's function. ...

How can I run a TypeScript function within a JavaScript file?

I am working with a typescript file named file1.ts export function Hello(str: string) { console.log(str); } In addition, I have another file called index.js { require('./some.js'); } Furthermore, there is a script defined in the pack ...

Tips for dynamically expanding the interface or type of an object in TypeScript

Currently, I am exploring the integration of PayPal's Glamorous CSS-in-JS library into a boilerplate project that also utilizes TypeScript. Glamorous provides a way to incorporate props into an element as shown below: const Section = glamorous.secti ...

What is the best way to incorporate npm packages into my projects?

Lately, I've been heavily relying on nodejs, but I keep running into the same issue. With so many projects available and a plethora of npm packages to choose from, it's frustrating that every time I try npm install --save some-package, I struggle ...

Error encountered when attempting to add headers to a request, resulting in an HTTP status code

Encountering difficulties when making get requests to a server with headers set using Axios/http request. Adding any header (excluding the content-type header) triggers the same error: "Response for preflight has invalid HTTP status code 405." This issue p ...

In the JavaScript example provided, do child classes inherit their parent class prototype?

Here's the code I'm working with: class Rectangle { constructor(w, h) { this.w = w; this.h = h; } } Rectangle.prototype.area = function () { return (this.w * this.h); }; class Square extends Rectangle { construct ...

"Encountering a Type Error while attempting to destructure elements within ReactJS

Issue Upon querying objects from the GraphQl server and logging data, I can see the objects in the console. However, when attempting to destructure it as data: { getPosts : posts }, a type error is returned. Furthermore, trying to use map directly on data ...

After logging in successfully, the React app needs a hard refresh to update the

I'm encountering a debugging challenge and would appreciate any assistance from the community. I've been working on my first React app and successfully implemented a Login feature, but after a user logs in, they have to hard refresh their browser ...

Can Ajax be utilized to invoke an internal function within a web application?

Brand new to PHP, this is a whole new world for me. Currently, I am attempting to dynamically update a drop down list from 1-10 based on the selection of a previous drop down list. The initial drop down list allows you to choose tables numbered 1-35, whil ...