Vuejs conditionally render nav items after authentication

I'm using vuejs with vuetify and authenticating with a laravel/passport api. I'm having a hard time nailing down the conditional rendering of my nav icons. Obvs I want them to not be visible to unauthenticated users and then to show when the user is authenticated and redirected to my main page. Here is my App.vue that has the v-app and nav:

<template>
  <div>
<v-app>
  <v-navigation-drawer app absolute v-model="drawer"></v-navigation-drawer>
  <v-toolbar app color="primary" class="white--text">
    <v-toolbar-side-icon @click="drawer = !drawer" dark></v-toolbar-side-icon>
    <v-toolbar-title>App</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-tooltip bottom>
        <v-btn
          flat
          to="/"
          slot="activator"
          dark
          v-if="showNav"
        >
          <v-icon>home</v-icon>
        </v-btn>
        <span>Dashboard</span>
      </v-tooltip>
      <v-tooltip bottom>
        <v-btn
          flat
          to="/SubmitBug"
          slot="activator"
          dark
          v-if="showNav"
        >
          <v-icon>add</v-icon>
        </v-btn>
        <span>Submit a new Bug</span>
      </v-tooltip>
      <v-tooltip bottom>
        <v-btn
          flat
          to="/logout"
          slot="activator"
          dark
          v-if="showNav"
        >
          <v-icon>close</v-icon>
        </v-btn>
        <span>Logout</span>
      </v-tooltip>
    </v-toolbar-items>
  </v-toolbar>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer class="pa-3 white--text" color="primary">
    <v-spacer></v-spacer>
    <div>&copy;  SomeCoolCompany</div>
  </v-footer>
</v-app>

<script>
export default {
  data: () => ({
    drawer: false,
    showNav: false
  }),
  beforeCreate () {
    User.checkAuth() ? this.showNav = true : this.showNav = false
    console.log(this.showNav)
  },
  created () {
    EventBus.$on('logout', () => {
      User.logout()
    })
  }
}
</script>

The console log in the beforeCreate hook is logging true, but I have to refresh to get the icons to show. The User.checkAuth() returns a boolean. If I place the User.checkAuth() ? this.showNav = true : this.showNav = false in the created method, it initially logs false, but then true on refresh. Anyone know a graceful way to handle this? Thanks!

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2KifSco
via IFTTT