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 up
とSign out
リンクを出しわけます。
Sign out
リンクを押下した際は、Auth.signOutを利用して、Sign out
を行います。
コード
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり!
中日ドラゴンズを応援してます。
コメント