Vue-bulma and nprogress in Vue: Progress bar continuously loading during guard/redirect operations

Hello, I have encountered an issue with nprogress where it works perfectly fine in all scenarios except when redirecting to /login, it keeps spinning indefinitely. I have tried using showProgressBar: false but it doesn't seem to resolve the problem.

The intended behavior is that if the user is logged in, they will be directed to /dashboard; otherwise, they should be redirected to /login.

Here is a snippet of my code:


const routes = [
  {path: '/', name: 'root', redirect: { name: 'login' }, meta: {showProgressBar: false}},
  {path: '/login', component: LoginPage, name: 'login', beforeEnter: loggedIn, meta: {showProgressBar: false}},
  {path: '/dashboard', component: DashboardPage, name: 'dashboard', meta: { requiresAuth: true }},
  // Other route configurations...
]

const router = new VueRouter({
  linkActiveClass: 'active',
  mode: 'hash',
  routes
})

function loggedIn (to, from, next) {
  const authUser = JSON.parse(window.localStorage.getItem('authUser'))
  if (authUser && authUser.auth) {
    next({name: 'dashboard'})
  } else {
    next()
  }
}

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const authUser = JSON.parse(window.localStorage.getItem('authUser'))
    if (authUser && authUser.auth) {
      next()
    } else {
      next({name: 'login'})
      this.nprogress.done()
    }
  }
  next()

Thank you for taking the time to read this.

Answer №1

It's not always easy to provide a solution without seeing the code in action, but one approach you could try is reversing the order of the calls to this.nprogress.done() and next(...) like so:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const authUser = JSON.parse(window.localStorage.getItem('authUser'))
    if (authUser && authUser.auth) {
      next()
    } else {
      this.nprogress.done(); // <- SWITCHED HERE
      next({name: 'login'})
    }
  }
  next()
}

By moving the call to next() before this.nprogress.done(), the context will be properly transitioned to the new component, potentially ensuring that the nprogress call occurs at the right moment.

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

Issue encountered while attempting to load global scss in vue-styleguidist

Currently, I am utilizing vue-styleguidist to create a styleguide for my Vue application, which was built using the webpack template provided by vue-cli. In my project, there is a _variables.scss file that I would like to load globally when starting the s ...

A guide on dynamically using jQuery to embed an image within a hyperlink tag

I am having trouble with these HTML tags: img = <img data-dz-thumbnail="" target="_blank" alt="twitter-btn-mob.png" src="image.jpg"> a = <a href="javascript:void(0)" target="_blank"></a> My goal is to insert the image tag into the anc ...

Angularjs still facing the routing issue with the hashtag symbol '#' in the URL

I have recently made changes to my index.html file and updated $locationProvider in my app.js. After clicking on the button, I noticed that it correctly routes me to localhost:20498/register. However, when manually entering this URL, I still encounter a 4 ...

Reveal or conceal information with a dropdown menu feature

I am attempting to implement a feature where the image file upload section is hidden or displayed based on the selection made in a dropdown list. If the user selects option "2", the image upload section should be hidden. Conversely, if they choose option " ...

Display the initial three image components on the HTML webpage, then simply click on the "load more" button to reveal the subsequent two elements

I've created a div with the id #myList, which contains 8 sub-divs each with an image. My goal is to initially load the first 3 images and then have the ability to load more when clicking on load more. I attempted to follow this jsfiddle example Bel ...

Utilizing CSS to create a dynamic full-screen background slider for a static website

I am working on a static website and I am in need of creating a background slider with a fixed height of 587px. The images are 2000px wide, but I want the user to only see up to 1000px width of each image on their screen. The image should be static and not ...

Exploring the power of business logic with Vue 3 and Pinia

Imagine a scenario where I have developed a basic webshop application using Vue 3. Whenever a user adds an item to the cart, I store it locally in Pinia and also send this event information to the backend. Typically, what I would do is create an action in ...

IE/Firefox returning empty value for Ajax requests

After spending two days trying to solve the issue, I still can't figure out why this code is failing in IE (v11) and Firefox while working fine in Chrome. I have read many questions on similar topics involving caching problems with multiple Ajax call ...

What is the best way to format specific text as bold within an input text field?

I am attempting to make certain text bold within an input text field. However, I'm uncertain about how to achieve this because HTML code is not recognized inside a text field. Therefore, using <b> will not be effective. Is there a way to bold sp ...

How can I correctly update values from a sibling component that has been imported in Vue.js 2.0?

My Vue 2.0 project follows the single-file component approach and consists of three components: App (parent), AppHeader, and FormModal. Both AppHeader and FormModal are direct children of App and siblings of each other. The main objective is to toggle the ...

A guide on eliminating redundant sub-arrays consisting of both integers and strings from a two-dimensional array using Javascript

I have a 2-dimensional array that contains both integers and strings, and I'm looking to eliminate duplicates from it: original array = [["admin", 2, "regular"], ["customer", "regular"], ["regular", "customer"], [1], ,["admin"], [1], ["admin"] desir ...

Issue with Axios not including cookies in the headers, irrespective of the use of withCredentials: true | Backend with FastAPI

Here is my axios configuration I am able to receive the cookie successfully using Postman, so it seems to be an issue with axios. const api = axios.create({ baseURL: 'http://localhost:8000/', withCredentials: true, headers: { crossDomain: ...

Javascript: Understanding Error Handling in the Context of Async Await

I am looking to strengthen my logical reasoning, not diving into abstract concepts. Scenario 1: try { var result = await new IamErrorAlways() if (result && result instanceof Error) return result // Is this the appropriate error handling method? } ca ...

Transform the color of links in a Sankey diagram on Google upon clicking a node

Currently, I am in the process of creating a Sankey diagram using Google charts. As of now, I have implemented the following CSS: svg path:hover { fill: red; } However, I have noticed that this code only changes the color of the links when hovering over ...

ReactJS implementation of hierarchical dropdown menus

I'm currently working on creating a multi-level nested drop-down menu. I've been using the "react-dropdown" library, and I've managed to display a new dropdown just below the main one. However, I'm facing difficulties in implementing th ...

Describing how to assign multiple variables in a VUEX mutation

store.js import Vue from 'vue'; import Vuex from 'vuex'; import userStore from './user/userStore.js'; import VuexPersist from "vuex-persistedstate"; Vue.use(Vuex) const debug = process.env.NODE_ENV != ...

What is the best way to enhance the SQL query limit by activating a button?

I'm new to programming, and I want to learn how to dynamically increase the limit of an SQL query when a button is clicked. Here's what I have so far: <?php $number = 5; $db->query("SELECT * FROM results LIMIT $number"); ?> & ...

The use of the tooltip function in Rails 6 webpack may not be possible

I have attempted to modify the versions of bootstrap, jquery, and popper without success. I do not believe I am utilizing multiple versions of jquery. I am uncertain as to where the issue may lie. Any assistance in identifying what I may be overlooking wou ...

Implementing Image Upload Feature using Node.js and MongoDB

Can someone guide me on how to upload an image using node js? https://i.sstatic.net/xGpw7.png I've been attempting to upload a photo and store it in my database, but haven't had any success. Any advice on uploading photos to a database with no ...

how to open a new tab using JavaScript with Selenium

My code is supposed to open a new window that goes from the login window to the main menu, module, reports, and finally the report name. The report name should be opened in the next tab. Issue: The report name is not opening in a new tab; it's openin ...