const menuData = [
    {
    name: 'Home',
    path: '/home',
    permission: 'home:view' // 權(quán)限標(biāo)識(shí)
    },
    {
    name: 'Products',
    path: '/products',
    permission: 'products:view'
    },
    {
    name: 'Orders',
    path: '/orders',
    permission: 'orders:view'
    },
    // 其他菜單項(xiàng)...
    ];

 // 在登錄成功后的處理邏輯中 
 // 假設(shè)從服務(wù)器端獲取到的用戶權(quán)限信息為 userPermissions 
 // 存儲(chǔ)到Vuex 
 this.$store.commit('setUserPermissions', userPermissions); 
 // 或存儲(chǔ)到localStorage 
 localStorage.setItem('userPermissions', JSON.stringify(userPermissions));

// 在Vuex的store模塊中定義mutations和state 
// store.js 
import Vue from 'vue'; 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
const store = new Vuex.Store({ 
    state: { 
        userPermissions: [] // 初始狀態(tài)為空數(shù)組 
    },
    mutations: { 
        setUserPermissions(state, permissions) 
            { 
                state.userPermissions = permissions; 
            } 
        } 
       }); 
 export default store;

 // 在登錄成功后的處理邏輯中 
 // 假設(shè)從服務(wù)器端獲取到的用戶權(quán)限信息為 userPermissions 
 localStorage.setItem('userPermissions', JSON.stringify(userPermissions));

<template> 
    <div> 
        <ul> 
            <li v-for="item in menuData" :key="item.path" v-show="hasPermission(item.permission)"> 
            <router-link :to="item.path">{{ item.name }}</router-link> 
            </li> 
         </ul> 
     </div> 
 </template> 
 <script> 
     export default { 
         computed: { 
             menuData() { 
                 // 獲取菜單數(shù)據(jù) 
                 return menuData; 
             } }, 
         methods: { 
             hasPermission(permission) 
                 { 
                     // 判斷用戶是否有權(quán)限 
                     // 假設(shè)權(quán)限信息存儲(chǔ)在this.$store.state.user.permissions中 
                     const userPermissions = this.$store.state.user.permissions; 
                     return userPermissions.includes(permission); 
                 } 
          } 
     } 
</script>

import Vue from 'vue'; 
import Router from 'vue-router'; 
Vue.use(Router); 
const router = new Router({ 
    routes: [ 
        { 
            path: '/home', 
            component: Home, 
            meta: { permission: 'home:view' } // 路由權(quán)限標(biāo)識(shí) 
        }, 
        { 
             path: '/products', 
             component: Products, 
             meta: { permission: 'products:view' } 
         }, 
         { 
             path: '/orders', 
             component: Orders, 
             meta: { permission: 'orders:view' } 
          }, 
          // 其他路由配置... 
       ] 
 }); 
 router.beforeEach((to, from, next) => { 
     const userPermissions = store.state.user.permissions; 
     const requiredPermission = to.meta.permission; 
         if (requiredPermission && !userPermissions.includes(requiredPermission)) { 
             // 沒(méi)有權(quán)限，重定向到登錄頁(yè)面或顯示無(wú)權(quán)限提示 
             next('/login');
             // 或者顯示無(wú)權(quán)限提示頁(yè)面 
             // next('/no-permission'); 
          } else { 
              next(); 
           } 
    });
export default router;

<template> 
    <button v-permission="'user:create'">Create User</button> </template> <script> 
export default { 
    directives: { 
        permission: { 
            inserted(el, binding) 
                { 
                    const userPermissions = this.$store.state.user.permissions; 
                    const requiredPermission = binding.value; 
                    if (!userPermissions.includes(requiredPermission)) { 
                          el.style.display = 'none'; // 或禁用按鈕等操作 
                     } 
                } 
            } 
         } 
     } 
 </script>

<template> 
       <button v-if="hasPermission('user:create')">Create User</button> </template> 
<script> 
        export default { 
            methods: { 
                hasPermission(permission) { 
                    const userPermissions = this.$store.state.user.permissions; 
                    return userPermissions.includes(permission); 
             } 
        } 
     } 
</script>

axios.interceptors.request.use((config) => { 
    // 判斷用戶是否有權(quán)限訪問(wèn)API 
    if (!hasPermission(config.url)) { 
        // 不允許訪問(wèn)，取消請(qǐng)求或其他處理方式 
        return Promise.reject(new Error('無(wú)權(quán)限訪問(wèn)該API')); 
   } 
   return config; 
   }, 
   (error) => { 
    return Promise.reject(error); 
   });

// 動(dòng)態(tài)生成路由配置 
    function generateRoutes(permissionList) { 
        const routes = []; 
        permissionList.forEach(permission => { 
            const route = { 
                path: permission.path, 
                component: () => import(`@/views/${permission.component}`), 
                meta: { // 其他路由元信息 } }; 
                routes.push(route); 
            }); 
        return routes; 
      } 
      // 添加動(dòng)態(tài)路由 
      router.addRoutes(generateRoutes(permissionList));

   // 角色列表 
   const roles = [ 
       { id: 1, name: '管理員' }, 
       { id: 2, name: '普通用戶' } 
   ]; 
   // 權(quán)限列表 
   const permissions = [ 
       { id: 1, name: '創(chuàng)建用戶', role: '管理員' }, 
       { id: 2, name: '編輯用戶', role: '管理員' }, 
       { id: 3, name: '查看用戶', role: '管理員' }, 
       { id: 4, name: '查看用戶列表', role: '普通用戶' } 
   ];

    function getUserRoles(userId) { 
        // 根據(jù)用戶ID獲取用戶所屬的角色列表 
        // 返回一個(gè)包含角色名稱的數(shù)組 
   }

   function hasPermission(permission, userId) 
   { 
       const userRoles = getUserRoles(userId); 
       // 根據(jù)用戶角色判斷是否具有權(quán)限 
       return permissions.some(p => p.name === permission && userRoles.includes(p.role)); 
    }