Show navbar 메뉴는 사용자 인증에 따라 다릅니다.

Show navbar 메뉴는 사용자 인증에 따라 다릅니다.

다른 보기에 고정된 navbar 구성 요소가 있습니다.

이 navbar에는 로그인 페이지로 리디렉션하는 로그인 링크가 포함되어 있습니다.

사용자가 올바른 자격 증명을 입력하면 동일한 탐색 모음이 포함된 홈 페이지로 리디렉션합니다.

내가 하려는 일:

로그아웃 링크를 사용하여 navbar의 Login 링크를 변경하고 사용자 이름을 표시합니다(예: Welcome, Adam).

Navbar 구성 요소에서 수행하려고 시도한 작업:

    <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()기능.

컴퓨터 속성이나 시계를 사용해야 할 것 같은데 막혔습니다.

navbar는 로그인 작업을 관리하지 않아야 합니다.나는 설정할 것입니다.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속성:

v-on:logout="do_logout_method()"
v-on:login="do_login_method()"

언급URL : https://stackoverflow.com/questions/56279340/show-navbar-menu-depends-on-user-authentication