onspot-frontend/src/App.vue

<template>
  <div id="app" v-if="$store.state.appReady">

    <navbar/>

    <div id="content">
      <router-view :key="$route.fullPath"/>
    </div>

    <div id="footer">
      <footer-nav/>
    </div>

    <spotify-player/>

  </div>
  <div id="app-loader" v-else>
    <big-chungus-loader id="loading-screen"/>
  </div>
</template>

<script>
import FooterNav from "@/components/FooterNav";
import Navbar from "@/components/Navbar";
import BigChungusLoader from "@/components/BigChungusLoader";
import SpotifyPlayer from "@/components/SpotifyPlayer";

export default {
  name: "Login",
  components: {
    Navbar,
    FooterNav,
    BigChungusLoader,
    SpotifyPlayer
  },
  created() {
    // The basic app is created... Currently showing a loading screen (as soon as mounted)

    if (this.$api.haveToken) {

      this.$api.getMyInfo().then(({name}) => {

        this.$store.dispatch('storeUserData', name).then(() => {
          if (this.$route.path === '/login') {
            // TODO: ez igy nagyon gagyi solution
            this.$router.push({name: "Collections"}).catch(() => {
            });
          }
          this.$store.dispatch('setAppReady');

        });

      }).catch(({status, text}) => {
        if (status === 401) {
          this.$api.clearTokenFromLocalStorage();
          this.$router.push('/login').catch(() => {});
          this.$store.dispatch('setAppReady');

        } else {
          this.$showToast(text);
        }
      });

    } else {
      this.$router.push('/login').catch(() => {});
      this.$store.dispatch('setAppReady');

    }

  }
}
</script>

<style>
#content {
  margin-top: 70px;
  margin-bottom: 20px;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#footer {
  padding: 1em;
  margin-top: auto;
  background: #E9ECEF;
}

#app-loader {
  height: 100%;
}

#loading-screen {
  margin: 45vh auto 0 auto;
}

#player-spacer {
  height: 80px;
}

</style>