Cannot get the right props value from Vue Component

Question

I'm trying to get the value of a props inside of a component, but the returned value is incorrect.

App.vue

<template>
    <v-app>
    <router-view :authentication="auth"></router-view>
</template>

<script>
    import auth from '../auth.js';
    export default {
      data       : () => ({
          auth           : auth
      }),
      mounted: function () {
          this.$nextTick(function () {
              auth.check()
          })
      }
    }
</script>

Dashboard.vue (gets rendered as the router-view)

<template>
    <h1>You're Logged In!</h1>
</template>

<script>
    export default {
        props: ['authentication'],
        mounted: function() {
            this.$nextTick(function () {
                console.log(this.authentication.user.authenticated) // Returns false (should be true)
                }
            )
        }
    }
</script>

auth.js

export default {
    user: {
        authenticated: false,
        profile: null
    },
    check() {
        let token = localStorage.getItem('id_token')
        if (token !== null) {
            Vue.http.get(
                'api/user?token=' + token,
            ).then(response => {
                this.user.authenticated = true
                this.user.profile = response.data.user
            })
        }
    }
}

The result of console.log(this.authentication.user.authenticated) in Dashboard.vue is returned as false, but the Vue devtools indicated that the value should be true (which is what should be returned).

Here is a screenshot of the props in my Dasboard.vue component through the Vue devtools:

What I've Tried

1) I've tried changing the value of the user object in auth.js from false to true and THEN I get the correct output in Dashboard.vue. However, this is no good since the check() function is what should be updating the value of the user object in auth.js.

2) I've logged the result of this.authentication in Dashboard.vue and I can clearly see that the nested object user.authenticated is true, yet the result of console.log(this.authentication.user.authenticated) is still false for some reason.

Here is a screenshot of the logged result of console.log(this.authentication):

The mounted lifecycle handler of Dashboard.vue is firing before authenticated is set to true. nextTick isn't going to fix that, the Vue lifecycle is on the order of 15ms and the ajax call is likely taking much longer than that. — Bert
I want to be able for my mounted lifecycle handler to read the most up-to-date version of the authentication prop in Dashboard.vue — Robert Cooper

Bert Bert · Accepted Answer · 2017-12-10T20:14:50

I suggest a different approach. Check for authorization before you even get into Vue, then depending on whether or not the user is authorized, set the appropriate router path.

This would require returning a promise from the check method in auth.

check(){
  return new Promise((resolve, reject) => {
    // do your authentication and set user.authenticated appropriately
    resolve(this.user)
  })
}

Then your main script looks like this:

import Vue from "vue";
import App from "./App";
import router from "./router";
import auth from "./auth";

auth.check().then(user => {
  if (!user.authenticated) {
    router.push("/NotAuthorized");
  }

  new Vue({
    el: "#app",
    router,
    template: "<App/>",
    components: { App }
  });
});

Here is a working example.

Cannot get the right props value from Vue Component

What I've Tried

1 Answers