Vue obtient différentes barres de navigation avec des identités différentes

Vue est un framework frontal populaire pour créer des applications d'une seule page avec des capacités de liaison de données sans faille et une syntaxe facile à apprendre. Dans le développement réel, il est souvent nécessaire de charger différentes barres de navigation en fonction de l'identité de l'utilisateur. Cet article présentera comment implémenter la fonction d'obtention de différentes barres de navigation basées sur différentes identités dans Vue.

Prérequis

Cet article suppose que vous connaissez déjà les bases de Vue.js et l'outil de packaging webpack. Si vous ne savez pas grand-chose sur ces contenus, il est recommandé de suivre d’abord des cours pertinents.

Confirmer les exigences

Avant de commencer à écrire du code, nous devons clarifier nos exigences. Chargez différentes barres de navigation en fonction des différentes identités des utilisateurs. Tout d’abord, nous devons créer un composant de barre de navigation, puis charger différents composants en fonction de différentes identités d’utilisateur.

Créer un composant de barre de navigation

Créez un composant nommé Navigation.vue, où nous définirons le style et la logique de mise en page de la barre de navigation. Le code spécifique est le suivant :

<template>
  <div>
    <nav>
      <ul>
        <li>
          <router-link to="/">首页</router-link>
        </li>
        <li>
          <router-link to="/products">产品</router-link>
        </li>
        <li>
          <router-link to="/about">关于我们</router-link>
        </li>
        <li v-if="isAdmin">
          <router-link to="/admin">管理后台</router-link>
        </li>
        <li>
          <button @click="logout">退出</button>
        </li>
      </ul>
    </nav>
  </div>
</template>

Dans le code ci-dessus, nous utilisons la directive v-if dans Vue.js pour contrôler l'affichage du composant. Le menu backend d’administration n’apparaîtra dans la barre de navigation que si l’utilisateur actuel est un administrateur. De plus, nous avons ajouté un bouton de déconnexion à la barre de navigation sur lequel les utilisateurs peuvent cliquer pour se déconnecter. v-if 指令来控制组件的显示。只有当当前用户是管理员时，管理后台菜单才会显示在导航栏中。此外，我们还将一个退出按钮添加到导航栏中，用户可以通过单击该按钮退出登陆。

获取用户身份

我们需要先获取当前用户的身份信息。在这里，我们使用了一个假数据来代替真实的身份验证逻辑。

// App.vue
 
export default {
  data() {
    return {
      currentUser: {
        username: "test",
        role: "admin"
      }
    };
  },
 
  computed: {
    isAdmin() {
      return this.currentUser.role === "admin";
    }
  }
};

假设当前用户的身份是管理员，通过计算属性 isAdmin 来判断是否为管理员。 如果是管理员，则在导航栏中显示管理后台菜单，否则不显示。

将导航栏组件添加到布局中

最后，我们需要将导航栏组件添加到页面布局中。 在此期间，必须在 router-view 组件外包装 Navigation 组件，如下所示：

<template>
  <div>
    <Navigation />
    <router-view />
  </div>
</template>

当用户访问应用程序中的任何页面时，Navigation

Obtenir l'identité de l'utilisateur

Nous devons d'abord obtenir les informations d'identité de l'utilisateur actuel. Ici, nous utilisons de fausses données à la place de la véritable logique d'authentification.

rrreee

En supposant que l'utilisateur actuel est un administrateur, déterminez s'il est un administrateur en calculant l'attribut isAdmin. Si vous êtes administrateur, le menu de fond de gestion sera affiché dans la barre de navigation, sinon il ne sera pas affiché.

Ajoutez le composant barre de navigation à la mise en page🎜🎜Enfin, nous devons ajouter le composant barre de navigation à la mise en page. En attendant, le composant Navigation doit être enveloppé en dehors du composant router-view, comme indiqué ci-dessous : 🎜rrreee🎜Lorsque l'utilisateur visite une page de l'application, le Navigation Le composant apparaîtra en haut de la page. 🎜🎜Conclusion🎜🎜Dans cet article, nous avons montré comment obtenir différentes barres de navigation basées sur différentes identités dans Vue. Tout d'abord, nous créons le composant Navigation, puis calculons le menu affiché en fonction de l'identité de l'utilisateur. Enfin, ajoutez le composant Navigation à la mise en page de votre application. 🎜🎜En cours de développement, le code de cet article devra peut-être être ajusté en fonction des besoins réels. Cependant, vous pouvez facilement implémenter différentes fonctions d'identité de la barre de navigation en utilisant des méthodes similaires, ce qui entraîne une meilleure expérience utilisateur. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!