Admin shell + redirect if already authenticated

index.vue

<template>
	<v-dialog
		v-model="dialog"
		width="500"
		persistent
	>
		<v-card>
			<v-card-title
				class="headline font-weight-light v-toolbar theme--dark primary"
			>
				Pharm<span 
					class="font-weight-medium"
					style="margin-right: 0.25em"
				>
					Assist
				</span>
				Sign-in
			</v-card-title>
  
			<v-card-text>
				<v-container
					class="pa-0"
					fluid
				>
					<v-layout
						align-space-around
						column
					>
						<v-flex
							align-start
							xs12
						>
							Enter your Account Name and Password and click "Sign In" to continue.
						</v-flex>
						
						<v-form 
							ref="login"
							v-model="valid"
						>
							<v-flex xs12>
								<v-text-field
									v-model="form.account"
									:rules="account"
									name="login"
									prepend-icon="mdi-shield-account"
									label="Account Name"
									type="text"
								>
								</v-text-field>
							</v-flex>
							<v-flex xs12>
								<v-text-field
									v-model="form.password"
									:rules="password"
									name="login"
									prepend-icon="lock"
									label="Password"
									type="password"
								>
								</v-text-field>
							</v-flex>
						</v-form>
					</v-layout>
				</v-container>
			</v-card-text>
			<v-divider></v-divider>
			
			<v-card-actions>
				<v-spacer></v-spacer>
				<v-btn
					color="primary"
					flat
					@click="reset($refs.login.reset)"
				>
					Reset form
				</v-btn>
				<v-btn
					color="primary"
					flat
					@click="recover"
				>
					Recover My Account
				</v-btn>
				<v-btn
					color="primary"
					:disabled="invalid"
					flat
					@click="authenticate($store, $axios, form)"
				>
					Sign in
				</v-btn>
			</v-card-actions>
		</v-card>
	</v-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
const SetAuthInfo = 'authentication/setAuthInfo';

const PharmServ = {
	routes: {
		identity: '/v1/PharmServ/identity',
		authenticate: '/v1/PharmServ/login',
	}
};

export default {
	name: 'IronApp',
	layout: 'Shell',
	
	data: () => ({
		valid: true,
		
		password: [
			v => !!v || 'Password is required',
			v => v.length >= 5 || 'Password must be at least 5 characters.'
		],

		account: [
			v => !!v || 'E-mail is required',
			v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
		],
		
		form: {
			account: '',
			password: ''
		}
	}),
	
	computed: {
		...mapGetters( 'authentication', [ 'tokenId' ]),
		
		dialog() {
			return this.tokenId.length === 0;
		},
		
		invalid: self => !self.valid,
	},
	
	fetch: ({ store, $axios: http$, params }) =>
		http$.get(PharmServ.routes.identity)
			.then( response => store.commit( SetAuthInfo, "Hello, world" )),
	
	methods: {
		reset(form) {
			form && form.reset();
		},
		
		recover(form) {
			console.log(form);
		},
		
		authenticate(store, axios, form) {
			return axios.post(PharmServ.routes.authenticate, form)
					  .then( response => (response.code === 200 &&
									  store.commit( SetAuthInfo, response.data )));
		}
	}
};
</script>