Authenticationを利用してサインアウトを実装していきます。

環境等

サインアウトの実装

views/Signin.vueを修正します。

AmplifyEventBusを利用して、Sign inに成功した際に、signedInイベントを通知します。

App.vueを修正します。
上記で設定したイベントを受け取り、Sign inの状態を保持します。
また、Vueライフサイクルのcreatedで認証状態を判定し既にSign inしている場合を考慮します。

その状態に応じて、Sign in,Sign upとSign outリンクを出しわけます。

Sign outリンクを押下した際は、Auth.signOutを利用して、Sign outを行います。

	<template>
	<div id="app">
	<div id="nav">
	<router-link to="/">Home</router-link> \|
	<template v-if="!signedIn">
	<router-link to="/signin">Sign in</router-link> \|
	<router-link to="/signup">Sign up</router-link>
	</template>
	<template v-if="signedIn">
	<router-link to="/about">About</router-link> \|
	<router-link to="/signin" @click.native="signout">Sign out</router-link>
	</template>
	</div>
	<router-view />
	</div>
	</template>
	<script>
	import { AmplifyEventBus } from "aws-amplify-vue";

	export default {
	name: "App",
	async created() {
	this.$Amplify.Auth.currentAuthenticatedUser()
	.then(() => {
	this.signedIn = true;
	})
	.catch(() => {
	this.signedIn = false;
	});

	AmplifyEventBus.$on("authState", info => {
	if (info === "signedIn") {
	this.signedIn = true;
	} else {
	this.signedIn = false;
	}
	});
	},
	data() {
	return {
	signedIn: false
	};
	},
	methods: {
	async signout() {
	try {
	await this.$Amplify.Auth.signOut();
	this.signedIn = false;
	this.$router.push("/signin");
	} catch (e) {
	console.log(e);
	}
	}
	}
	};
	</script>

	<style lang="scss">
	#app {
	font-family: "Avenir", Helvetica, Arial, sans-serif;
	color: #2c3e50;
	}
	#nav {
	text-align: center;
	padding: 30px;
	a {
	font-weight: bold;
	color: #2c3e50;
	&.router-link-exact-active {
	color: #42b983;
	}
	}
	}
	</style>

view raw

App.vue

hosted with ❤ by GitHub

	<template>
	<vs-row vs-justify="center">
	<vs-col type="flex" vs-lg="6" vs-xs="10">
	<vs-card fixedHeight>
	<div slot="header">
	<h3>
	Sign in
	</h3>
	</div>
	<div class="centerx">
	<vs-row>
	<vs-col vs-w="12">
	<vs-input
	type="email"
	label-placeholder="email"
	v-model="userInfo.email"
	class="input"
	size="large"
	/>
	</vs-col>
	</vs-row>
	<vs-row>
	<vs-col vs-w="12">
	<vs-input
	type="password"
	label-placeholder="Password"
	v-model="userInfo.password"
	class="input"
	size="large"
	/>
	</vs-col>
	</vs-row>
	<vs-row>
	<vs-col vs-w="12">
	<vs-button class="signin" @click="signIn">Sign in</vs-button>
	</vs-col>
	</vs-row>
	<div slot="footer" class="error-message">
	{{ this.errorMessage }}
	</div>
	</div>
	</vs-card>
	</vs-col>
	</vs-row>
	</template>
	<script>
	import { AmplifyEventBus } from "aws-amplify-vue";

	export default {
	name: "Signin",
	data() {
	return {
	userInfo: {
	email: "",
	password: ""
	},
	errorMessage: ""
	};
	},
	methods: {
	async signIn() {
	try {
	await this.$Amplify.Auth.signIn(
	this.userInfo.email,
	this.userInfo.password
	);
	AmplifyEventBus.$emit("authState", "signedIn");
	this.$router.push("/about");
	} catch {
	this.errorMessage = "ログインできませんでした";
	}
	}
	}
	};
	</script>
	<style lang="sass" scoped>
	.centerx
	display: flex
	align-items: center
	justify-content: center
	flex-wrap: wrap

	.input
	width:100%
	padding: 16px 64px

	.signin
	width: calc(100% – 64px * 2)
	padding: 16px 0
	margin: 32px 64px 0

	.error-message
	color: #FF0000
	margin: 32px 64px
	</style>

view raw

Signin.vue

hosted with ❤ by GitHub

ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり！

中日ドラゴンズを応援してます。