Because I couldn't answer how to use Vue to control button-level permissions, the interviewer said: You can go home

In a recent interview, an interviewer asked me how to control button-level permissions in a Vue project. At first, I suggested using `v-if`, but the interviewer indicated that this is not a good enough solution.

I mentioned that our project doesn't need much button-level permission control, so `v-if` seems to be enough.

However, interviewers emphasized the importance of a more versatile approach. Ultimately, their feedback was that while I had experience in all areas, my depth of knowledge could be improved.

How to control permissions at button level?

Let's explore how button-level permissions are handled in the Vue Vben Admin project. This is a popular backend system with 16.2k stars on GitHub.

Get license code

In order to implement permission control, we need permission codes (or role codes).

Typically, the backend program provides a code that is stored globally after a successful login. Usually, after login, this code is fetched and stored in global storage (Vuex or 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);
   }
});

Next, there are three ways to control permissions at the button level. Let's take a closer look at each method.

Method 1: Function method

You can use the functional approach to control permissions using `v-if` directives. The core logic is encapsulated in the `hasPermission` function:

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

Method 2: Component method

Vue Vben Admin also provides an `Authority` component for permission control:

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>

The `Authority` component uses the `hasPermission` function to determine whether to render the wrapped content.

Method 3: Custom Instructions

A third method involves using a custom directive called `v-auth`:

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

This directive controls the visibility of elements based on permission codes.

Each method relies on the `hasPermission` function, which checks that the user's permission code matches the desired code. Vue Vben Admin works around dynamic update limitations by leveraging the `updated` lifecycle hook and `watchEffect` to re-render buttons.

It is worth noting that the solution provided by Vue Vben Admin has certain limitations, such as the inability to dynamically change button permissions, and the inability to respond to dynamic changes in user permissions. Addressing these limitations requires further consideration and exploration.

in conclusion

While the provided solution provides effective button-level permission control, the interviewer may be looking for a more advanced and elegant approach. I welcome any insight and guidance from those more experienced in this field.

Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of articles is not easy. If you like my sharing, please don’t forget to like and forward it, so that more people in need See. At the same time, if you want to gain more knowledge of front-end technology, welcome to follow me, your support will be the biggest motivation for me to share. I will continue to output more content, so stay tuned.

Fan benefits

Share a modern blog source code (Headless blog), the current popular headless blog solution, this source code uses React, GatsbyJS v5 technology, and has nine different types of blog styles. This blog not only supports local Markdown files, but also supports content management systems such as Contentful CMS, Strapi CMS, Netlify CMS, and Sanity CMS, allowing you to freely create blog articles. If you like it, please accept it.