根据用户是否登录 AWS amplify 有条件地呈现导航栏

Question

我正在尝试根据用户是否登录或不使用 AWS amplify 和 Vue 3 作为前端来有条件地呈现 a and 。 我已经能够让它不呈现然后在登录时呈现但是当我注销时导航栏元素仍然存在并且应该已经消失。 我是 Vue 的新手，所以这可能是一个简单的修复，但我不确定。 我尝试同时使用计算和手表来尝试强制更新计算但那不起作用。 任何帮助将非常感激。 代码如下：

<template>
  <header>
    <nav class="navbar">
      <router-link @click="closeMenu" to="/" class="nav-branding"
        >Portal</router-link
      >
      <ul :class="[menuIsOpen ? 'active' : '', 'nav-menu']" v-show="isSignedIn">
        <li @click="toggleMenu" class="nav-item">
          <router-link to="/pensions" class="nav-link">Pensions</router-link>
        </li>
        <li @click="toggleMenu" class="nav-item">
          <router-link to="/benefits" class="nav-link">Benefits</router-link>
        </li>
        <li @click="toggleMenu" class="nav-item">
          <router-link to="/annual-leave" class="nav-link"
            >Annual Leave</router-link
          >
        </li>
        <li @click="signOut" class="nav-item">
          <router-link to="/" class="nav-link">Sign Out</router-link>
        </li>
      </ul>
      <div
        @click="toggleMenu"
        :class="[menuIsOpen ? 'active' : '', 'hamburger']"
        v-show="isSignedIn"
      >
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </nav>
  </header>
  <div :class="[menuIsOpen ? 'pushed' : 'static']"></div>
</template>

<script>
import { Auth } from "aws-amplify";

export default {
  name: "NavBar",
  data() {
    return {
      menuIsOpen: false,
    };
  },
  methods: {
    toggleMenu() {
      this.menuIsOpen = !this.menuIsOpen;
    },
    closeMenu() {
      this.menuIsOpen = false;
    },
    async signOut() {
      try {
        await Auth.signOut();
        // navigate to the login page or another route
        this.$router.push("/");
      } catch (err) {
        console.log(err);
      }
    },
    async isUser() {
      try {
        await Auth.currentAuthenticatedUser();
        return true;
      } catch {
        return false;
      }
    },
  },
  computed: {
    isSignedIn() {
      return this.isUser();
    },
    watch: {
      isSignedIn() {
        this.$forceUpdate();
      },
    },
  },
};
</script>

<style>
header {
  height: auto;
  background-color: #0d1520;
}

li {
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
}

.navbar {
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

.nav-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 60px;
}

.nav-branding {
  font-size: 2rem;
  color: #03e9f4;
}

.nav-branding:hover {
  text-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
    0 0 100px #03e9f4;
}

.nav-link {
  transition: 0.7s ease;
  color: #03e9f4;
}

.nav-link:hover {
  text-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
    0 0 100px #03e9f4;
}

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: #03e9f4;
}

.hamburger:hover .bar {
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
    0 0 100px #03e9f4;
}

@media (max-width: 768px) {
  .static {
    transition: all 0.5s ease-in-out;
    padding-top: 0;
    z-index: 0;
    background-color: #151f31;
  }

  .pushed {
    padding-top: 168px;
    transition: padding 0.3s ease-in-out;
    transition-delay: 0.2;
    z-index: 0;
    background-color: #151f31;
  }
  .hamburger {
    display: block;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    left: 100%;
    top: 70px;
    gap: 0;
    flex-direction: column;
    background-color: #0d1520;
    width: 100%;
    text-align: center;
    transition: 0.5s;
  }

  .nav-item {
    margin: 16px 0;
  }

  .nav-menu.active {
    z-index: 1;
    left: 0;
  }
}
</style>

Answer 1

更新

您的问题中有太多“未知数”，因此很难给您一个可行的答案。 我会给你提示，但请仔细阅读 Vue 文档以了解如何实现它们并更好地理解框架。

正如您在下面的评论中提到的，您在“同级”组件中处理 function 中的登录，并且这两个组件都导入了App.vue中。

App.vue
views/
... NavBar.vue
... Login.vue

选项1

如果不使用 state 管理，您可以做的是移动此代码：

export default {
  data() {
    return { isSignedIn: false };
  },
  methods: {
    async isAuthenticated() {
      try {
        await Auth.currentAuthenticatedUser();

        this.isSignedIn = true;
      } catch {
        this.isSignedIn = false;
      }
    },
  }
  async mounted() {
    await this.isAuthenticated();
  }
}

在你的 App.vue 中，然后在登录组件中使用发射器，这样你的 App.vue 就可以在用户成功登录时“监听”。 您可以在 emit 事件道具中使用this.isAuthenticated()作为回调 function。 然后，将this.isSignedIn state 作为prop传递到导航栏组件中：

登录.vue

export default {
  ...
  methods: {
    signInUser() {
      /** your sign in logic */
      this.$emit('signIn')
    }
  }
  ...
}

App.vue

<!-- Sample template -->
<NavBar :show="isSignedIn" />
<Login @sign-in="isAuthenticated" />

导航栏.vue

export default {
  props: ['show'] // you can then pass show in your v-show
}

选项 #2

您还可以有条件地渲染整个导航栏组件。 但是，您需要稍微重新构建您的模板：

App.vue

<Navbar v-show="isSignedIn"/>

选项 #3

理想情况下，App 不应该负责管理isSignedIn ，因为使用此 state 的唯一组件是 NavBar 和 Login 组件。 话虽如此，考虑使用Pinia来管理组件之间的状态。