Show different list items if user is logged in or not

Question

I have an array of possible side nav items that i want to render to the screen. The guest user should only see 2 of the items and when the user logs in he should be able to see all 3 of them. How would I not render the first item in the list if the user is not logged in?

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"
},
];

I have a mounted method that checks if the $auth.user object is not null, and it then sets the value of isAuthorized to true.

This is the code that renders the list now:

    <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>

I dont know how to write this block so that it would ommit the first item in the list without hardcodding it somehove, since this line below doesnt work.

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

I know that using the loggedIn method would be easier but I cannot used it because of the way the app is built currently.

so, the first item should only be displayed if the user is authorised? the one with `isAuthorised: false`? — Jaromanda X, Sep 20 '22 at 06:13
Exactly. The isAuthorised property is part of the model and is optional. Looks like this -> isAuthorized?:boolean — Simon, Sep 20 '22 at 06:19
I'd suggest the logic is `v-if="app.isAuthorized !== false || $auth.user"` - though, that looks odd, logic-wise ... perhaps change `isAuthorized:true` for the one that needs to have the user authorized, and then it's `v-if="!app.isAuthorized || $auth.user"` — Jaromanda X, Sep 20 '22 at 06:19

score 0 · Answer 1 · answered Sep 20 '22 at 06:27

If you want to show the first item after user logged in, just need to change the condition of the first item.

Init apps like this:

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
  },
];

And then render the list like this:

 <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>

After user has logged, just need to set the first app's isAuthorized as true.

Just saying my thoughts, hope it helps.

score 0 · Answer 2 · answered Sep 20 '22 at 06:29

After the user logged in, store the token in the store with mutations. Note that it will be a string but you should convert it into a boolean using !!. '' = false but ' ' is true.
This is all you need.

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>

score 0 · Answer 3 · answered Sep 20 '22 at 07:00

As you are assigning isAuthorized property in each object in an array and then based on the $auth.user you are setting it as true/false. Then we can simply achieve that by updating the flag in the created() hook.

Live Demo :

new Vue({
  el: '#app',
  data: {
    apps: [
      {
        title: "sideNav.centralWeighingLink",
        url: "centralWeighing",
        id: "1",
        icon: "mdi-scale-balance"
      },
      {
        title: "sideNav.appsLink",
        url: "apps",
        id: "2",
        icon: "mdi-apps"
      },
      {
        title: "sideNav.2Link",
        url: "password",
        id: "3",
        icon: "mdi-key-variant"
      }
    ],
    isLoggedInUser: false
  },
  created() {
    if (this.isLoggedInUser) {
        this.apps.forEach(obj => obj.isAuthorized = true)
    } else {
        this.apps.forEach((obj, index) => {
        obj.isAuthorized = (index) ? true : false
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="app in apps" :key="app.id">
    <li v-if="app.isAuthorized">{{ app.url }}</li>
  </div>
</div>

Show different list items if user is logged in or not

3 Answers3