Vue's method of implementing different user permissions

Vue Methods to implement different user permissions

In the project, realizing permission control of different users is a common requirement and a common functional module. For example, different roles (administrators, ordinary users, etc.) in the management system should have different access permissions, mini programs, apps, etc. display home pages when logging in with different roles and jump to access different pages. This article will introduce several common permission control methods with vue as the main code framework.

1. Permission control based on route guard

1.1 Program Overview

Based on Vue RouterbeforeEachPerform global routing guard control. We canvuexorpiniastoring user roles and routing themmetaDefines the roles allowed in the field.

1.2 Implementation steps

1. existrouterAdded for each route in configurationmetaField, store the roles that are allowed to access.
2. Store user roles in Vuex/Pinia.
3. usePerform permission verification.

1.3 Code Example

// router/
 import { createRouter, createWebHistory } from 'vue-router';
 import store from '@/store';

 // Introduce multiple component pages
 import Home from '@/views/';
 import Admin from '@/views/';
 import AddSomeFun from '@/views/';
 import Login from '@/views/';

 // Define the route and define the accessible role in meta
 const routes = [
   { path: '/', component: Home },
   { path: '/admin', component: Admin, meta: { roles: ['admin'] } },
   { path: '/addSomeFun', component: AddSomeFun, meta: { roles: ['user'] } },
   { path: '/login', component: Login }
 ];

 // Create a route
 const router = createRouter({
   history: createWebHistory(),
   routes
 });

 //Route verification
 ((to, from, next) => {
   const userRole = ; // Suppose that the user user and administrator admin roles are stored in Vuex
   if ( && !(userRole)) {
     next('/'); // No permission to jump to home page
   } else {
     next();
   }
 });

 export default router;

2. Permission control based on Vue directive

2.1 Program Overview

Use the Vue directivev-permissionTo control the display of buttons, components or modules hidden.

2.2 Implementation steps

1. Create a custom directive globally in Vuev-permission。
2. This command determines whether the element is displayed based on user permissions.

2.3 Code Example

// directives/
 // Instruction encapsulation
 import { useStore } from 'vuex';

 export default {
   install(app) {
     ('permission', {
       mounted(el, binding) {
         const store = useStore();
         const userRole = ;
         if (!(userRole)) {
           ?.removeChild(el);
         }
       }
     });
   }
 };

//
 import { createApp } from 'vue';
 import App from './';
 import store from './store';
 import permissionDirective from './directives/permission';

 const app = createApp(App);
 (store);
 (permissionDirective); // Register custom commands
 ('#app');

<!-- Example of use -->
 <button v-permission="['admin']">Visible only by administrator</button>

3. Permission control based on Vuex (or Pinia)

3.1 Program Overview

Store permission information in Vuex/Pinia and pass it in the componentcomputedCompute attribute dynamically controls the display of components or buttons.

3.2 Code Example

// store/
 import { createStore } from 'vuex';

 export default createStore({
   state: {
     userRole: 'user' // Assume that the user role is stored
   },
   mutations: {
     setUserRole(state, role) {
        = role;
     }
   }
 });

<!-- Use Vuex in components for permission judgment -->
 <template>
   <button v-if="userRole === 'admin'">visible by administrators</button>
 </template>

 <script>
 import { computed } from 'vue';
 import { useStore } from 'vuex';

 export default {
   setup() {
     const store = useStore();
     const userRole = computed(() => );
     return { userRole };
   }
 };
 </script>

4. Backend return permission control

4.1 Program Overview

There are two ways to return permission control in the backend:

1. Return user permission information: After the front-end obtains role information, use the aforementioned method to control permissions.
2. Backend returns accessible routes: The backend returns the route list that the user can access, and the frontend uses itDynamic registration.

4.2 Code example (backend return route)

// Get user permissions after logging in and dynamically add routes
 import router from '@/router';
 import store from '@/store';
 import axios from 'axios';

 async function fetchUserRoutes() {
   const res = await ('/common/getUserRoutes'); // Assume that the backend returns routing information
   const routes =
  
   (route => {
     (route);
   });
 }

 fetchUserRoutes();

5. Summary

method	Applicable scenarios	Advantages	shortcoming
Router Guard	Page-level permission control	Applicable to full page permissions	Unable to control buttons and other details
Vue command	Component, button level permissions	Applicable to UI-level permissions	Need to manually remove elements
Vuex/Pinia	Component-level permissions	Applicable to flexible permission judgment	Need to maintain permission logic in multiple components
Backend return permissions	Suitable for large-scale permission management	Unified backend management, flexible	Need to update the front-end route dynamically

The above methods can be used in combination to select appropriate permission control methods based on actual business needs.