<div>
    <main-nav></main-nav>
    <router-view></router-view>
</div>

<template>
  <li v-show="loggedIn">
    <a @click="logout">Logout</a>
  </li>
</template>

<script>
  import { isLoggedIn, logout } from '@/tools/Auth'

  export default {
    computed: {
      loggedIn: {
        cache: false,
        get() {
          return isLoggedIn()
        }
      }
    },

    methods: {
      logout() {
        logout().then(() => {
          this.$router.push({ name: 'Login' })
          // this is necessary or the nav isn't updated after logout
          this.$forceUpdate()
        })
      }
    }
  }
</script>