Vue ログイン状態によりリダイレクトさせるも中身がチラ見えする

アカウントページ→ログインしてる人にしか見せない

ログインページ→まだログインしている人にしか見せない

条件に当てはまらない状態でアクセスされたら、任意のページに強制リダイレクトする。

しかし、リダイレクト寸前に一瞬ページの中身が見えてしまう

原因はv-ifを記載する位置に問題がある。

templateの開始タグ直後のタグにv-ifをつければいい。

ログインしている人にしか見せたくないページ

プロフィールなどが記載されるアカウントページとか。

<template>
    <div v-if="isLoggedIn">
        <div>
            <p>{{ user.name }}</p>
            <p>{{ user.email }}</p>
        </div>
    </div>
</template>

<script>
    data() {
        return {
            user: {
                name: null,
                email: null,
                token: null,
            },
            isLoggedIn: false,
        }
    },
    mounted() {
        axios.get("/api/loginCheck")
            .then(response => {
                this.isLoggedIn = true
            })
            .catch(error => {
                console.log(error)
                this.isLoggedIn = false
                this.$router.push("/login") //ログイン画面にジャンプ
            })
        }
</script>

この例でいうと2行目に書いたらいける。

これでページの中身はチラ見えしなくなる。

まだログインしていない人にしか見せたくないページ

ログインフォームがあるページなど。

今回はバックエンドをLaraveで書いており、sunctomによりトークンベースの認証を行っている。

ログインしたらローカルストレージにtokenが格納される仕組みがあると仮定して、こんなコードにした。

<template>
    <div v-if="!(isLoggedIn)">
        <b-form>
            //ログインフォーム
            <b-button type="button" variant="primary" @click="onSubmit">ログイン</b-button>
        </b-form>
    </div>
</template>

<script>
    data() {
        return {
            isLoggedIn: false,
        }
    },
    mounted() {
        this.message = this.$store.state.message
        this.isLoggedIn = localStorage.token //トークンがあればログインしている扱いにする

        axios.get("api/loginCheck")
            .then(response => {
                this.$router.push(this.$router.go(-1))  //1つ前のページにジャンプ         
            })
    },
</script>

axios.get("api/loginCheck") .then(response => {・・・}のなかにisLoggedInをtrueにする処理を書いたらうまくかなかったので、上記のコードのようにしている。

それでもチラ見えする場合は、キャッシュを削除しながら何回か更新を試してほしい。