Bootfile async data



  • 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. 🙂

    code.png



  • @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



  • @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…
    code2.png



  • @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' })
          })
      })
    }


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



  • @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' })
          })
      })
    }
    


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

    Your trick did the work!

    Have a nice day 🙂
    Greets from Perú!



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


Log in to reply