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

App.vue

<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>

Signin.vue

<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>