最近のインタビューで、インタビュアーは私に、Vue プロジェクトでボタンレベルの権限を制御する方法を尋ねました。最初、私は「v-if」を使用することを提案しましたが、面接官は、これは十分な解決策ではないと指摘しました。

私たちのプロジェクトではボタンレベルの権限制御はあまり必要ないので、「v-if」で十分だと述べました。

しかし、面接官は、より汎用性の高いアプローチの重要性を強調しました。最終的に、彼らのフィードバックは、私にはあらゆる分野の経験があるが、知識の深さはさらに向上する可能性があるというものでした。

ボタンレベルで権限を制御するにはどうすればよいですか?

Vue Vben Admin プロジェクトでボタンレベルの権限がどのように処理されるかを見てみましょう。これは、GitHub で 16.2,000 個のスターを獲得している人気のバックエンドシステムです。

ライセンスコードを取得する

権限制御を実装するには、権限コード（またはロールコード）が必要です。

通常、バックエンドプログラムは、ログイン成功後にグローバルに保存されるコードを提供します。通常、ログイン後、このコードが取得され、グローバルストレージ (Vuex または Pinia) に保存されます。

import { defineStore } from 'pinia';

export const usePermissionStore = defineStore({
   state: () => ({
     permCodeList: [], // List of permission codes
   }),
  
   getters: {
     getPermCodeList() {
       return this.permCodeList;
     },
   },
  
   actions: {
     setPermCodeList(codeList) {
     this.permCodeList = codeList;
   },
  
   async changePermissionCode() {
     const codeList = await getPermCode();
     this.setPermCodeList(codeList);
   }
});

次に、ボタンレベルで権限を制御するには 3 つの方法があります。それぞれの方法を詳しく見てみましょう。

方法 1: 関数メソッド

関数型アプローチを使用して、「v-if」ディレクティブを使用して権限を制御できます。コアロジックは「hasPermission」関数にカプセル化されています。

<template>
 <a-button v-if="hasPermission(['20000', '2000010'])" color="error" class="mx-4">
   Visible with codes [20000, 2000010]
 </a-button>
</template>
<script>
 import { usePermission } from '/@/hooks/web/usePermission';

 export default defineComponent({
   setup() {
     const { hasPermission } = usePermission();
     return { hasPermission };
   },
 });
</script>

メソッド 2: コンポーネントメソッド

Vue Vben Admin は、権限制御用の `Authority` コンポーネントも提供します。

template>
 <div>
   <Authority :value="RoleEnum.ADMIN">
     <a-button type="primary" block> Visible only for admin role </a-button>
   </Authority>
 </div>
</template>
<script>
 import { Authority } from '/@/components/Authority';
 import { defineComponent } from 'vue';
 export default defineComponent({
   components: { Authority },
 });
</script>

`Authority` コンポーネントは、`hasPermission` 関数を使用して、ラップされたコンテンツをレンダリングするかどうかを決定します。

方法 3: カスタム命令

3 番目の方法では、「v-auth」と呼ばれるカスタムディレクティブを使用します。

<a-button v-auth="'1000'" type="primary" class="mx-4">
  Visible with code ['1000'] </a-button>

このディレクティブは、許可コードに基づいて要素の可視性を制御します。

各メソッドは「hasPermission」関数に依存しており、ユーザーの許可コードが目的のコードと一致するかどうかをチェックします。Vue Vben Admin は、`updated` ライフサイクルフックと `watchEffect` を利用してボタンを再レンダリングすることで、動的更新の制限を回避します。

Vue Vben Admin が提供するソリューションには、ボタンのアクセス許可を動的に変更できないことや、ユーザーのアクセス許可の動的な変更に応答できないことなど、特定の制限があることに注意してください。これらの制限に対処するには、さらなる検討と調査が必要です。

結論は

提供されているソリューションは効果的なボタンレベルの権限制御を提供しますが、面接官はより高度で洗練されたアプローチを探している可能性があります。この分野で経験豊富な方々からの洞察と指導を歓迎します。

記事のスペースが限られているため、今日の内容はここで共有します。記事の最後に、記事の作成は簡単ではないことを思い出していただきたいと思います。私の共有が気に入っていただけましたら、忘れないでください。より多くの人が困っているように、いいねや転送をしてください。同時に、フロントエンドテクノロジーについてもっと知識を得たい場合は、私をフォローすることを歓迎します。あなたのサポートが私にとって共有する最大の動機になります。今後もより多くのコンテンツを出力していきますので、ご期待ください。

ファンの特典

現在人気のヘッドレスブログソリューションである最新のブログソースコード (ヘッドレスブログ) を共有します。このソースコードは React、GatsbyJS v5 テクノロジを使用しており、9 種類のブログスタイルがあります。このブログはローカルの Markdown ファイルだけでなく、Contentful CMS、Strapi CMS、Netlify CMS、Sanity CMS などのコンテンツ管理システムもサポートしており、自由にブログ記事を作成できます。

Vue を使用してボタンレベルの権限を制御する方法に私が答えることができなかったため、面接官はこう言いました。「家に帰ってください」

ライセンスコードを取得する

方法 1: 関数メソッド

メソッド 2: コンポーネントメソッド

方法 3: カスタム命令

結論は

ファンの特典

おすすめ