javascript - Visa olika listobjekt beroende på om användaren är inloggad eller inte

Jag har en matris med möjliga sidomenyalternativ som jag vill visa på skärmen. Gästanvändaren ska bara se 2 av objekten och när användaren loggar in ska han kunna se alla 3 av dem. Hur skulle jag inte visa det första objektet i listan om användaren inte är inloggad?

apps: Array<SideNavItemModel> = [
{
  title: "sideNav.centralWeighingLink",
  url: "centralWeighing",
  id: "1",
  icon: "mdi-scale-balance",
  isAuthorized: false
},
{
  title: "sideNav.appsLink",
  url: "apps",
  id: "2",
  icon: "mdi-apps"
},
{
  title: "sideNav.2Link",
  url: "password",
  id: "3",
  icon: "mdi-key-variant"
},
]; 

Jag har en monterad metod som kontrollerar om $auth.user-objektet inte är null, och den sätter sedan värdet på isAuthorized till true.

Det här är koden som renderar listan nu:

    <v-list dense>
    <v-list-item v-for="app in apps" :key="app.id"
                 active-class="router-link-active" :to="`/${app.url}`" link>
      <div v-if="!$auth.user && app.isAuthorized === false ">
        <v-list-item-icon>
          <v-icon>{{ app.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ $t(app.title) }}</v-list-item-title>
        </v-list-item-content>
      </div>
    </v-list-item>
  </v-list>

Jag vet inte hur jag ska skriva detta block så att det skulle utelämna det första objektet i listan utan att på något sätt hårdkoda det, eftersom raden nedan inte fungerar.

v-if="!$auth.user && app.isAuthorized === false"

Jag vet att det skulle vara enklare att använda metoden loggedIn, men jag kan inte använda den på grund av hur appen är byggd just nu.

Svar #1

Om du vill visa det första objektet efter att användaren har loggat in, behöver du bara ändra villkoret för det första objektet.

Initiera appar så här:

apps: Array<SideNavItemModel> = [
  {
    title: "sideNav.centralWeighingLink",
    url: "centralWeighing",
    id: "1",
    icon: "mdi-scale-balance",
    isAuthorized: false
  },
  {
    title: "sideNav.appsLink",
    url: "apps",
    id: "2",
    icon: "mdi-apps",
    isAuthorized: true
  },
  {
    title: "sideNav.2Link",
    url: "password",
    id: "3",
    icon: "mdi-key-variant",
    isAuthorized: true
  },
]; 

Och sedan återge listan så här:

 <v-list dense>
    <v-list-item v-for="app in apps" :key="app.id"
                 active-class="router-link-active" :to="`/${app.url}`" link>
      <div v-if="app.isAuthorized">
        <v-list-item-icon>
          <v-icon>{{ app.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ $t(app.title) }}</v-list-item-title>
        </v-list-item-content>
      </div>
    </v-list-item>
  </v-list>

Efter att användaren har loggat in behöver man bara ställa in den första appens isAuthorized som true.

Bara säger mina tankar, hoppas det hjälper.

Svar #2

Efter att användaren loggat in, lagra token i lagret med mutationer. Observera att det kommer att vara en sträng men du bör konvertera det till ett boolean-värde med !!. ''=false men ' '=true.
Detta är allt du behöver.

new Vue({
  el: '#app',
  data() {
    return {
      hello: 'hellasdfo',
      token: false,
    }
  },
  created() {
    // store in store and get it with getters
    // this.token = !!this.$store.getters['token'] or !!this.$store.getters.token
    this.token = !!'some token';
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p>Not LoggedIn</p>
  <p>Not LoggedIn</p>
  <p v-if="token">LoggedIn</p>
</div>