App.vue

<template>
  <div id="app">
    <app-header/>
    <bootstrap-alert v-if="appAlert" :message="appAlert.message" :type="appAlert.type" :dismissable="appAlert.dismissable"/>
    <div id="router-content">
      <router-view/>
    </div>
  </div>
</template>

<script>
import Header from '@/components/header/Header.vue'
import BootstrapAlert from '@/components/alert_messages/bootstrap-alert.vue'
import axios from 'axios'
export default {
  name: 'App',
  components: {
    'app-header': Header,
    'bootstrap-alert': BootstrapAlert
  },
  computed: {
    appAlert () {
      return this.$store.getters.appAlert
    }
  },
  created () {
    if (this.$store.getters.isAuthenticated) {
      axios.defaults.headers.common['Authorization'] = 'Token ' + this.$store.getters.token
    } else {
      delete axios.defaults.headers.common['Authorization']
    }
  }
}
</script>