🐙
Nuxt.jsでWebアプリケーション開発メモ6
概要
ログインしていない場合URL直接入力で認証が必要な画面に遷移できないようにする。
- 非認証時はlogin画面にリダイレクト。
プロンプト6
# 命令6
ログインしていない場合にURLを直接入力して、login画面以外にアクセスしたとき、login画面にリダイレクトするようにしてください。
対応内容
- middleware配下に認証チェック処理(
auth.vue)を追加。 - login画面以外では、
definePageMeta { middleware:'auth'}を追加し、認証チェックするようにした。
追加命令
- 非認証時top画面にURL直打ちで遷移させると一瞬表示されるので、修正。
→ loading要素を表示させて認証チェックが終わるまでごまかす。 - 各画面にloading要素を表示させるかどうかの判定が書かれていたので共通化。
→layouts/default.vueにloading判定要素を移動。 - ↑のデグレ。login画面を表示する際もloadingが最初に表示される。
→ layoutsを分離し、login画面用のlayouts(auth.vue)を追加。 - layouts分離でコードの重複が起きたので共通化する。
→ components配下にAppHeader.vueを追加した。
ソースコード差分
Discussion