AWS Amplifyを使ってサインインを実装する-3

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

前回のAWS Amplifyを使ってサインインを実装する-2 に追加していきます。

環境等

項目 バージョン
node v10.15.3
npm 6.4.1
@aws-amplify/cli 1.6.11
aws-amplify 1.1.28
aws-amplify-vue 0.2.11
vuesax 3.8.65
material-icons 0.3.1

サインアウトの実装

サインイン時にイベントを発行

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

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

サインアウト

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

その状態に応じて、Sign in,Sign upSign 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

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました