Question

我在不同的视图中都有一个固定的导航栏组件。

此导航栏包含登录链接，该链接重定向到登录页面。

用户输入正确的凭据后，我将其重定向到包含相同导航栏的主页。

我正在尝试做的事情：

使用注销链接更改导航栏中的登录链接，并在其附近显示用户名。 （例如，亚当）

我在导航栏组件中尝试做的事情：

    <template>
  <header>
    <div v-if="logged_in" class="col-lg-6 col-md-6 col-sm-6 col-xs-12  text-center text-sm-right">
      <!-- header top menu -->
      <div class="header-top-menu">
        <ul>
          <li>
            Welcome, {{ user.name }}
          </li>
          <li>
            <a href="#" @click="logout">
              Logout
            </a>
          </li>
        </ul>
      </div>
      <!-- end of header top menu -->
    </div>
    <div v-else class="col-lg-6 col-md-6 col-sm-6 col-xs-12  text-center text-sm-right">
      <!-- header top menu -->
      <div class="header-top-menu">
        <ul>
          <li>
            <router-link :to="{name: 'Login'}">
              Login
            </router-link>
          </li>
          <li>
            <router-link :to="{name: 'Register'}">
              Register
            </router-link>
          </li>
        </ul>
      </div>
      <!-- end of header top menu -->
    </div>
  </header>
</template>

<script>
  export default {
    data: () => ({
      user: null,
      logged_in: false,
    }),
    methods: {
      logout () {
        this.$store.dispatch('logout').then((res) => {
          this.user = null;
          this.logged_in = false;
          this.$router.push({ name: 'Login'});
        });
      }
    },
    created() {
      this.$store.dispatch('userDetails').then(() => {
        this.user = this.$store.getters.getUserDetails;
        this.logged_in = true;
      });
    },
  }
</script>

问题和结论：

用户登录后，我需要刷新主页以加载用户信息，因为我正在使用created()函数。

我认为我应该使用 计算属性 或手表，但是我被卡住了。

Answer 1

您的导航栏可能不应该管理登录操作。我会在导航栏上设置iptabels-save：

prop

，以便您props: { logged_in: Boolean }的值更改时都可以工作。然后，我将重组您的逻辑，以便通过发出在组件外部执行登录和注销：

v-if's

然后，在组件外部，您可以指示适当的方法并更新<a v-if="logged_in" v-on:click="$emit('logout')">Logout</a> <a v-if="!logged_in" v-on:click="$emit('login')">Login</a>属性：

loggin_in

显示导航栏菜单取决于用户身份验证

1 个答案: