CODEWITHSUNDEEP
vue.jsvue-router
Mistre83
Mistre83

Reputation: 2827

Vue router - API Data not fetching on redirect

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).

Upvotes: 0

Views: 1351

Answers (2)

Ashish Wadekar
Ashish Wadekar

Reputation: 11

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.

Upvotes: 0

Nazgul Mamasheva
Nazgul Mamasheva

Reputation: 119

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
    }
  }
};

Upvotes: 1

Related Questions