Vue router - API Data not fetching on redirect

Question

I'm building an application with JWT Login and i check if the user is logged in (when visit /) and then i redirect to Dashboard:

let routes = [
    { path: '', component: Login,
        beforeEnter(to, from, next) {
            if (auth.loggedIn()) {
                next({ path: '/dashboard' });
            } else {
                next();
            }
        }
    },
    { path: '/dashboard', component: Dashboard }
];

The Dashboard component is simple:

export default {
        created() {
            this.loadOrders();
        },
        methods: {
            loadOrders() {
               // Load Orders
            }
        },
        watch: {
            '$route': 'loadOrders'
        },
    }

If i Login, i will be redirected to /dashboard and the data is fetched.

If i'm on Dashboard (http://localhost:8080/dashboard) and i hit "refresh" on browser, this works too.

But, if i'm on this url http://localhost:8080/dashboard and i delete dashboard (so i just digit http://localhost:8080) the beforeEnter see that i'm authenticated and redirect me to /dashboard, but the data is not fetched (created, mounted etc are not called).

I think you should get rid of the this per-route navigation guard beforeEnter() and use the global one - router.beforeEach(), so It would be triggered on each navigation, but it would be on pending before all hooks has been resolved. — Belmin Bedak
– Belmin Bedak, Commented Jan 21, 2017 at 15:38
After login, open a new tab, visit http://localhost:8080 and see if it works. If it's OK, then maybe your dashboard component is kept alive or reused, only the first visit will trigger created. — Leo
– Leo, Commented Jan 23, 2017 at 7:34

Nazgul Mamasheva · Accepted Answer · 2017-01-31 05:06:31Z

Why there is no data section on your Dashboard component? If you use some data (ex: loading, error, post) on template, then you need to return them in data section. Try to add that section.

example:

<template>
  <div>
    <div v-if="loading">
      Loading...
    </div>

    <div v-if="!loading">
      {{ error }}
    </div>

    <div>
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

export default {
  data () {
    return {
      loading: false,
      error: null,
      post: null
    }
  },
  created () {
    this.fetchData()
  },
  watch: {
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.loading = true
       ...

      this.error = msg;
      this.post = post
    }
  }
};

krsteeve · Accepted Answer · 2018-12-18 18:31:21Z

0

When any action is taken against an API, the server responds with relevant status. So when you are deleting the product, you have to ignore the response from the server and then push the new path to Vue router.

edited Dec 18, 2018 at 18:31

krsteeve

1,8044 gold badges20 silver badges29 bronze badges

answered Dec 18, 2018 at 17:33

Ashish Wadekar

113 bronze badges

Collectives™ on Stack Overflow

Vue router - API Data not fetching on redirect

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related