Vue项目登录成功后如何动态更改导航栏下拉菜单项

1. 修正Navbar组件的下拉项判断逻辑 #

你当前导航栏的两个下拉选项判断条件完全相同，且未登录的展示逻辑写反了，先修改模板部分代码：

<template>
    <nav class="navbar navbar-expand-lg shadow">
        <div class="container navbar-container">
            <div class="navbar navbar-profile">
                <div class="dropdown">
                    <button class="btn dropdown-toggle" type="button" id="dropdownProfile" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-fw fa-user"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <!-- 未认证展示登录注册入口 -->
                        <li v-if="!authenticated"><router-link :to="{ name: 'login' }">Sign In/Register</router-link></li>
                        <!-- 已认证展示个人中心入口 -->
                        <li v-if="authenticated"><router-link :to="{ name: 'profile' }">Profile</router-link></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</template>

接着修改Navbar组件的逻辑部分，同步登录状态：

<script>
import authHelper from "../helpers/authHelper";
import GENERAL_APP_CONSTANTS from "../constants/GeneralAppConstants";

export default {
    data() {
        return {
            authenticated: false,
            authenticationFailed: false,
        };
    },
    // 组件初始化时先判断当前登录状态
    beforeMount() {
        this.authenticated = authHelper.validAuthentication();
    },
    mounted() {
        // 监听全局登录状态变更事件，同步更新本地状态
        EventBus.$on(GENERAL_APP_CONSTANTS.Events.CheckAuthentication, () => {
            this.authenticated = authHelper.validAuthentication();
        });
    },
    // 组件销毁前移除事件监听，避免内存泄漏
    beforeDestroy() {
        EventBus.$off(GENERAL_APP_CONSTANTS.Events.CheckAuthentication);
    }
};
</script>

2. 登录成功后触发全局状态更新 #

修改Login组件的signIn方法，登录成功后发送全局事件通知所有组件更新登录状态：

methods: {
    signIn: function () {
        authHelper.signIn(this.email, this.password, () => {
            // 触发全局登录状态更新事件
            EventBus.$emit(GENERAL_APP_CONSTANTS.Events.CheckAuthentication);
            this.$router.push({name: 'home'});
        });
    }
}

可选补充 #

后续开发退出登录功能时，退出成功后也触发一次CheckAuthentication事件，导航栏会自动更新为未登录状态。

内容的提问来源于stack exchange，提问作者magic bean