up vote 0 down vote favorite

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

share|improve this question
2  
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 Jan 21 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 Jan 23 at 7:34
up vote 1 down vote

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
    }
  }
};
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.