vue + amplify アプリ ログインの有無でのルーティング制御

記事の作成理由

備忘録として、記事を残しておきたい。
お困りの方がいらっしゃれば参考になればと思います。

AuthUIの実装

App.vue（サインアウト）
<amplify-greetings></amplify-greetings>
ログイン画面を表示させるページ
<amplify-authenticator></amplify-authenticator>

src/store/index.vue
storeにユーザー情報を保存する
userというステートを追加します。

export default createStore({
    state: {user: null,
    },
    mutations: {
 setUser(state, user) {
  state.user = user;
 },
    },
    actions: {
    },
    modules: {
    }
  })

ユーザーがサインイン済みであればこのuserステートに情報を保存し、
ユーザーがサインインしてなければこのuserステートを空にします。

routerも変更します。
追記

import store from "@/store/index.js";
import Auth from "@aws-amplify/auth";

function getAuthenticatedUser() {
  return Auth.currentAuthenticatedUser()
    .then((data) => {
      if (data && data.signInUserSession) {
        store.commit("setUser", data);
        return data;
      }
    })
    .catch((e) => {
      console.error(e);
      store.commit("setUser", null);
      return null;
    });
}
router.beforeResolve(async (to, from, next) => {
  await getAuthenticatedUser();

  return next();
});

サインページ以外のログインされた場合のみ表示される画面
各ルーティングの場所に記述します
src/router/index.js
meta: { requireAuth: true },

let user;

user = await getAuthenticatedUser();

if (to.name === "SignIn" && user) {
  return next({ name: "AlbumIndex" });
}

if (to.matched.some((record) => record.meta.requireAuth) && !user) {
  return next({ name: "SignIn" });
}

App.vue

<div v-if="isSignedIn">
  <amplify-greetings></amplify-greetings>
</div>

<script>

    export default {
    
      computed: {
    
        isSignedIn() {
    
          return this.$store.state.user !== null;
    
        },
    
      },
    
    };

</script>

先ほどstoreに追加したuserステートを参照し、
もしuserステートが存在すればサインアウトボタンを表示し、
空であればサインアウトボタンを非表示にしています

感想

ここまで簡単にログイン画面が実装できてします
ここからcognito など使用すればさらにログインが簡単になると感じました