Vue Auth / Recipes / Using Ready and Load

The ready and load methods are helpful with letting us know the current state of our authentication and user.

When a user logs in it will fetch a token and a user then redirect. But what happens if we refresh the page? We need some way to know if the token is proper and the user has been loaded.

This is where using ready and load can be useful.

#Examples

The ready method returns a reactive property that tells us when we can proceed.

<div
    v-if="$auth.ready()"
>
    We have checked the token and loaded the user.

    <router-view

    >
</div>

Typically this would be used for a load screen and it may interact with other pre-load checks.

<template>
    <div>
        <router-view
            v-if="loaded"
        />

        <div
            v-else
        >
            Loading...
        </div>
    </div>
</template>

<script>
    export default {
        computed: {
            loaded() {
                return (
                    this.$auth.ready() &&
                    this.$store.getters['properties/loaded']
                );
            }
        },

        mounted() {
            this.$auth
                .load()
                .then(() => {
                    // fetch some user app data.
                    // ex: notifications
                });
        }
    }
</script>