254 Updating the UI Based on Auth State

步骤

1、auth/getters.js中添加一个getter用于判断是否已经登录

isAuthenticated(state) {
        return !!state.token;
    },

如果已经登录，那么token有值，!!之后可以得到一个bool值；

2、CoachesList.vue中添加一个Login按钮

<template>
    <div>
        <base-dialog :show="!!error" title="An error occurred!" @close="handleError">
            <p>{{ error }}</p>
        </base-dialog>
        <section>
            <coach-filter @change-filter="setFilters"></coach-filter>
        </section>
        <section>
            <base-card>
                <div class="controls">
                    <base-button mode="outline" @click="loadCoaches(true)">Refresh</base-button>
                    <base-button link to="/auth" v-if="!isLoggedIn">Login</base-button>
                    <base-button v-if="!isLoggedIn && !isCoach && !isLoading" :link="true" to="/register">Register as
                        Coach</base-button>
                </div>
                <div v-if="isLoading">
                    <base-spinner></base-spinner>
                </div>
                <ul v-else-if="hasCoaches">
                    <!-- <li v-for="coach in filteredCoaches" :key="coach.id">{{ coach.firstName }}</li> -->
                    <coach-item v-for="coach in filteredCoaches" :key="coach.id" :id="coach.id"
                        :firstName="coach.firstName" :lastName="coach.lastName" :rate="coach.hourlyRate"
                        :areas="coach.areas"></coach-item>
                </ul>
                <h3 v-else>No coaches found.</h3>
            </base-card>
        </section>
    </div>
</template>

<script>
import CoachItem from '@/components/coaches/CoachItem.vue'
import CoachFilter from '@/components/coaches/CoachFilter.vue'

export default {
    components: {
        CoachItem,
        CoachFilter
    },
    data() {
        return {
            isLoading: false,
            error: null,
            activeFilters: {
                frontend: true,
                backend: true,
                career: true
            },
        };
    },
    computed: {
        filteredCoaches() {
            const coaches = this.$store.getters['coaches/coaches'];
            return coaches.filter(coach => {
                if (this.activeFilters.frontend && coach.areas.includes('frontend')) return true;
                if (this.activeFilters.backend && coach.areas.includes('backend')) return true;
                if (this.activeFilters.career && coach.areas.includes('career')) return true;
                return false;
            });
        },
        hasCoaches() {
            return !this.isLoading && this.$store.getters['coaches/hasCoaches'];
        },
        isCoach() {
            return this.$store.getters['coaches/isCoach'];
        },
        isLoggedIn() {
            return this.$store.getters.isAuthenticated;
        },
    },
    methods: {
        setFilters(updatedFilters) {
            this.activeFilters = updatedFilters;
        },
        async loadCoaches(refresh = false) {
            try {
                this.isLoading = true;
                await this.$store.dispatch('coaches/loadCoaches', { forceRefresh: refresh });
                this.isLoading = false;
            } catch (error) {
                this.error = error.message || 'Something went wrong!';
            }
        },
        handleError() {
            this.error = null;
        },
    },
    created() {
        this.loadCoaches();
    },
};
</script>

<style scoped>
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.controls {
    display: flex;
    justify-content: space-between;
}
</style>

3、TheHeader.vue中添加一个Login按钮

<template>
    <header>
        <nav>
            <h1><router-link to="/">Find a Coach</router-link></h1>
            <ul>
                <li><router-link to="/coaches">All Coaches</router-link></li>
                <li v-if="isLoggedIn"><router-link to="/requests">Requests</router-link></li>
                <li v-else-if="!isLoggedIn"><router-link to="/auth">Login</router-link></li>
            </ul>
        </nav>
    </header>
</template>

<script>
export default {
    computed: {
        isLoggedIn() {
            return this.$store.getters.isAuthenticated;
         }
    }
};
</script>

<style scoped>
header {
    width: 100%;
    height: 5rem;
    background-color: #3d008d;
    display: flex;
    justify-content: center;
    align-items: center;
}

header a {
    text-decoration: none;
    color: #f391e3;
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
}

a:active,
a:hover,
a.router-link-active {
    border: 1px solid #f391e3;
}

h1 {
    margin: 0;
}

h1 a {
    color: white;
    margin: 0;
}

h1 a:hover,
h1 a:active,
h1 a.router-link-active {
    border-color: transparent;
}

header nav {
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

li {
    margin: 0 0.5rem;
}
</style>