SolidScribe/client/src/App.vue

<template>
	<div id="app">

		<global-site-menu />

		<router-view />

		<global-notification />

	</div>
</template>

<script>

// import io from 'socket.io-client'
import axios from 'axios'

export default {
	components: {
		'global-site-menu': require('@/components/GlobalSiteMenu.vue').default,
		'global-notification':require('@/components/GlobalNotificationComponent.vue').default
	},
	data: function(){ 
		return {
			// loggedIn: 
		}
	},
	beforeCreate: function(){

		//Puts token into state on page load
		let token = localStorage.getItem('loginToken')
		let username = localStorage.getItem('username')

		// const socket = io({ path:'/socket' });
		const socket = this.$io
		socket.on('connect', () => {

			this.$store.commit('setSocketIoSocket', socket.id)

			this.$io.emit('user_connect', token)
		})

		//Detect if user is on a mobile browser and set a flag in store
		this.$store.commit('detectIsUserOnMobile')

		//Set color theme based on local storage
		if(localStorage.getItem('nightMode') == 'true'){
			this.$store.commit('toggleNightMode')
		}

		//Put user data into global store on load
		if(token){
			this.$store.commit('setLoginToken', {token, username})
		}

	},
	mounted: function(){

		//Update totals for entire app on event
		this.$io.on('update_counts', () => {
			console.log('Got event, update totals')
			this.$store.dispatch('fetchAndUpdateUserTotals')
		})

	},
	computed: {
		loggedIn () {
			//Map logged in from state
			return this.$store.getters.getLoggedIn
		}
	},
	methods: {
		destroyLoginToken() {
			this.$store.commit('destroyLoginToken')
		},
		loginGateway() {
			if(!this.loggedIn){
				console.log('This user is not logged in')
				this.$router.push({'path':'/login'})
				return
			}
		}
	}
}
</script>