Bootfile async data

davidreyg

Hi everybody! I’m trying to fetch from my server default settings for my client app made in Quasar.
But when the boot file redirects to ‘/xxxx_page’, it keeps refreshing the page.
And I don’t know why.
It’s suppose to do this ‘validation’ just ONE TIME.

pd: Excuse me for my English.

beets

@davidreyg This sort of code is better in a vue router guard, but to answer the question something like this would work:

export default ({ urlPath, redirect }) => {
  const isAuthorized = false
  if (!isAuthorized && !urlPath.startsWith('/some_error_page')) {
    redirect({ path: '/some_error_page' })
    return
  }
}

Taken from: https://quasar.dev/quasar-cli/boot-files#Redirecting-to-another-page

Or if you wanted to not check a path:

let hasRedirected = false
export default ({ redirect }) => {
  const isAuthorized = false
  if (!isAuthorized && !hasRedirected) {
    hasRedirected = true
    redirect({ path: '/some_error_page' })
    return
  }
}

Again though, much better to use vue router guards: https://router.vuejs.org/guide/advanced/navigation-guards.html

davidreyg

@beets
Hi @beets thanks for the answer. Mmmm My goal is to fetch some ‘GENERAL SETTINGS’ from my server
Ex:
-favicon
-App General Name…

So, I’m making a request to an endpoint in my server http:://example.com/api/general_settings

If it fails WITH status (401, 403, 500 , etc). The expected behavior is my client to redirect to a ROUTE ‘/some_error_page’
BUT it seems to re-run the entire APP over and over…

beets

@davidreyg It’s hard to copy / paste your code from an image, but one issue I see here is that in order to reject with a url, your boot function needs to return a promise, which it’s not. Try something like this:

export default ({ redirect }) => {
  return new Promise<IBootstrapResponse>((resolve, reject) => {
    axios
      .get<IBootstrapResponse('/some_endpoint')
      .then((response => {
        // DO STUFF
        resolve()
      })
      .catch((err: AxiosError) => {
        reject({ url: '/some_error_page' })
      })
  })
}

davidreyg

@beets I did implement your code in my project but It’s still reloading the entire App over and over

beets

@davidreyg Can you check to see if there are JS errors on the console? Also, check the network tab, is it actually reloading a new page? If so, try this:

export default ({ urlPath, redirect }) => {
  return new Promise<IBootstrapResponse>((resolve, reject) => {
    if(urlPath.startsWith('/some_error_page')) {
      return resolve()
    }
    axios
      .get<IBootstrapResponse('/some_endpoint')
      .then((response => {
        // DO STUFF
        resolve()
      })
      .catch((err: AxiosError) => {
        reject({ url: '/some_error_page' })
      })
  })
}

davidreyg

@beets OMG!!! Thanks a lot my friend.

Your trick did the work!

Have a nice day
Greets from Perú!

beets

@davidreyg Excellent! Glad I could help. Have a nice day as well