flowchart TD
    A[用戶登錄] --> B[獲取用戶權(quán)限數(shù)據(jù)JSON]
    B -- 解析為前端所需結(jié)構(gòu) --> C[生成動態(tài)路由]
    C -- addRoute添加到路由器 --> D[路由器Router]
    D -- 根據(jù)當(dāng)前路由生成 --> E[側(cè)邊欄菜單
（動態(tài)菜單組件）]
    
    E -- 點擊菜單項觸發(fā)路由切換 --> D
    
    F[訪問路由] --> G{路由守衛(wèi)檢查權(quán)限}
    G -- 有權(quán)限 --> H[正常渲染組件]
    G -- 無權(quán)限 --> I[跳轉(zhuǎn)404或登錄頁]
    
    H -- 組件內(nèi)按鈕 --> J{按鈕權(quán)限指令v-permission}
    J -- 權(quán)限碼匹配 --> K[顯示按鈕]
    J -- 權(quán)限碼不匹配 --> L[移除按鈕DOM]

{
  "code": 200,
  "data": {
    "userInfo": { "name": "Alice", "avatar": "" },
    "permissions": [
      {
        "id": 1,
        "parentId": 0,
        "path": "/system",
        "name": "System",
        "meta": { "title": "系統(tǒng)管理", "icon": "setting", "requiresAuth": true },
        "children": [
          {
            "id": 2,
            "parentId": 1,
            "path": "user",
            "name": "UserManagement",
            "meta": { "title": "用戶管理", "requiresAuth": true },
            "btnPermissions": ["user:add", "user:edit", "user:delete"] // 按鈕級權(quán)限標(biāo)識
          }
        ]
      },
      {
        "id": 3,
        "parentId": 0,
        "path": "/about",
        "name": "About",
        "meta": { "title": "關(guān)于", "icon": "info", "requiresAuth": false }
      }
    ]
  }
}

import { createRouter, createWebHistory } from 'vue-router';
import { useUserStore } from '@/stores/user';

// 靜態(tài)路由
export const constantRoutes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue'),
    meta: { title: '登錄', hidden: true } // hidden 表示不在側(cè)邊欄顯示
  },
  {
    path: '/404',
    name: 'NotFound',
    component: () => import('@/views/404.vue'),
    meta: { title: '404', hidden: true }
  }
];

// 動態(tài)路由（初始化為空，后續(xù)根據(jù)權(quán)限添加）
// 注意：這里不是直接定義，而是提供一個和后臺數(shù)據(jù)匹配的模板
export const asyncRoutesMap = {
  'UserManagement': {
    path: 'user', // 會拼接到父路由的 path 上
    name: 'UserManagement',
    component: () => import('@/views/system/UserManagement.vue'), // 需要提前創(chuàng)建好組件
    meta: { title: '用戶管理', requiresAuth: true }
  },
  'RoleManagement': {
    path: 'role',
    name: 'RoleManagement',
    component: () => import('@/views/system/RoleManagement.vue'),
    meta: { title: '角色管理', requiresAuth: true }
  }
  // ... 其他所有可能的路由
};

const router = createRouter({
  history: createWebHistory(),
  routes: constantRoutes // 初始化時只掛載靜態(tài)路由
});

export default router;

import { defineStore } from 'pinia';
import { ref } from 'vue';
import { getPermission } from '@/api/user';
import { asyncRoutesMap } from '@/router';
import { generateRoutes, generateMenu } from '@/utils/permission';

export const useUserStore = defineStore('user', () => {
  const token = ref('');
  const userInfo = ref({});
  const permissions = ref([]); // 存儲原始權(quán)限數(shù)據(jù)
  const dynamicRoutes = ref([]); // 存儲生成后的動態(tài)路由對象
  const menus = ref([]); // 存儲用于生成導(dǎo)航菜單的數(shù)據(jù)

  // 獲取用戶權(quán)限信息
  const getUserPermissions = async () => {
    try {
      const res = await getPermission();
      permissions.value = res.data.permissions;
      userInfo.value = res.data.userInfo;

      // 核心：根據(jù)權(quán)限數(shù)據(jù)生成動態(tài)路由和菜單
      const { routes, menuList } = generateRoutesAndMenus(permissions.value, asyncRoutesMap);
      dynamicRoutes.value = routes;
      menus.value = menuList;

      return dynamicRoutes.value;
    } catch (error) {
      console.error('獲取權(quán)限失敗', error);
      return [];
    }
  };

  // 退出登錄清空狀態(tài)
  const logout = () => {
    token.value = '';
    userInfo.value = {};
    permissions.value = [];
    dynamicRoutes.value = [];
    menus.value = [];
  };

  return {
    token,
    userInfo,
    permissions,
    dynamicRoutes,
    menus,
    getUserPermissions,
    logout
  };
});

// 工具函數(shù)：遞歸處理權(quán)限數(shù)據(jù)，生成路由和菜單
export const generateRoutesAndMenus = (permissionList, routeMap) => {
  const routes = [];
  const menuList = [];

  const traverse = (nodes, isChild = false) => {
    nodes.forEach(node => {
      // 1. 生成菜單項
      const menuItem = {
        path: node.path,
        name: node.name,
        meta: { ...node.meta, btnPermissions: node.btnPermissions }, // 保存按鈕權(quán)限
        children: []
      };
      if (isChild) {
        menuList[menuList.length - 1]?.children.push(menuItem);
      } else {
        menuList.push(menuItem);
      }

      // 2. 生成路由項 (只處理有 component 的節(jié)點，即葉子節(jié)點或需要布局的節(jié)點)
      // 如果后端返回的節(jié)點名稱能在我們的映射表 asyncRoutesMap 中找到，說明是有效路由
      if (routeMap[node.name]) {
        const route = {
          ...routeMap[node.name], // 展開映射表中的預(yù)設(shè)配置（最重要的是component）
          path: node.path,
          name: node.name,
          meta: { ...node.meta, btnPermissions: node.btnPermissions }
        };
        routes.push(route);
      }

      // 3. 遞歸處理子節(jié)點
      if (node.children && node.children.length > 0) {
        traverse(node.children, true);
      }
    });
  };

  traverse(permissionList);
  return { routes, menuList };
};

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();

const loginForm = ref({ username: '', password: '' });

const handleLogin = async () => {
  try {
    // 1. 執(zhí)行登錄請求，獲取 token
    const loginRes = await api.login(loginForm.value);
    userStore.token = loginRes.data.token;

    // 2. 獲取用戶權(quán)限信息
    const dynamicRoutes = await userStore.getUserPermissions();

    // 3. 動態(tài)添加路由
    dynamicRoutes.forEach(route => {
      // 注意：addRoute 可以接受父路由的 name 作為第一個參數(shù)，來實現(xiàn)嵌套路由的添加
      // 這里假設(shè)我們的權(quán)限數(shù)據(jù)已經(jīng)是一個平鋪的數(shù)組，或者使用其他方式匹配父路由
      // 一種更復(fù)雜的實現(xiàn)需要遞歸處理嵌套路由的添加，這里簡化演示
      router.addRoute(route); // 添加到根路由
      // 如果路由有父級，例如：router.addRoute('ParentRouteName', route);
    });

    // 4. 添加一個兜底的 404 路由（必須放在最后）
    router.addRoute({
      path: '/:pathMatch(.*)*',
      name: 'CatchAll',
      redirect: '/404'
    });

    // 5. 跳轉(zhuǎn)到首頁
    router.push('/');
  } catch (error) {
    console.error('登錄失敗', error);
  }
};
</script>

// ... 之前的導(dǎo)入和路由初始化代碼 ...

// 路由守衛(wèi)
router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore();
  const token = userStore.token;

  // 1. 判斷是否有 token
  if (token) {
    // 2. 如果是訪問登錄頁，直接跳轉(zhuǎn)到首頁
    if (to.path === '/login') {
      next('/');
    } else {
      // 3. 判斷是否已經(jīng)拉取過用戶權(quán)限信息
      if (userStore.permissions.length === 0) {
        try {
          // 4. 如果沒有獲取權(quán)限，則獲取權(quán)限并添加動態(tài)路由
          const dynamicRoutes = await userStore.getUserPermissions();
          dynamicRoutes.forEach(route => {
            router.addRoute(route);
          });
          // 5. 添加完動態(tài)路由后，需要重定向到目標(biāo)路由 to
          // replace: true 防止重復(fù)添加路由導(dǎo)致導(dǎo)航失敗
          next({ ...to, replace: true });
        } catch (error) {
          // 6. 如果獲取失敗，可能是 token 過期，清除狀態(tài)并跳回登錄頁
          userStore.logout();
          next(`/login?redirect=${to.path}`);
        }
      } else {
        // 7. 如果已經(jīng)有權(quán)限信息，直接放行
        next();
      }
    }
  } else {
    // 8. 沒有 token
    if (to.meta.requiresAuth === false || to.path === '/login') {
      // 如果目標(biāo)路由不需要權(quán)限或者是登錄頁，則放行
      next();
    } else {
      // 否則，跳轉(zhuǎn)到登錄頁，并記錄重定向地址
      next(`/login?redirect=${to.path}`);
    }
  }
});

<template>
  <el-menu
    :default-active="$route.path"
    router
    unique-opened
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
  >
    <sidebar-item
      v-for="menu in userStore.menus"
      :key="menu.path"
      :item="menu"
    />
  </el-menu>
</template>

<script setup>
import SidebarItem from './SidebarItem.vue';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
</script>

<template>
  <!--- 如果有子菜單，渲染 el-sub-menu -->
  <el-sub-menu
    v-if="item.children && item.children.length > 0"
    :index="item.path"
  >
    <template #title>
      <el-icon><component :is="item.meta.icon" /></el-icon>
      <span>{{ item.meta.title }}</span>
    </template>
    <sidebar-item
      v-for="child in item.children"
      :key="child.path"
      :item="child"
    />
  </el-sub-menu>
  <!--- 如果沒有子菜單，渲染 el-menu-item -->
  <el-menu-item v-else :index="resolvePath(item.path)">
    <el-icon><component :is="item.meta.icon" /></el-icon>
    <template #title>{{ item.meta.title }}</template>
  </el-menu-item>
</template>

<script setup>
import { resolve } from 'path-browserify';

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  basePath: {
    type: String,
    default: ''
  }
});

// 處理完整路徑（如果需要處理嵌套路徑）
function resolvePath(routePath) {
  return resolve(props.basePath, routePath);
}
</script>

import { useUserStore } from '@/stores/user';

// 按鈕權(quán)限檢查函數(shù)
function checkPermission(el, binding) {
  const { value } = binding; // 指令的綁定值，例如 v-permission="'user:add'"
  const userStore = useUserStore();
  const btnPermissions = userStore.currentRouteBtnPermissions; // 需要從當(dāng)前路由元信息中獲取按鈕權(quán)限

  // 從當(dāng)前路由的 meta 中獲取按鈕權(quán)限列表
  // 注意：需要在路由守衛(wèi)或菜單生成時，將 btnPermissions 存儲到當(dāng)前路由的 meta 中
  // 這里假設(shè)我們已經(jīng)有了 currentRouteBtnPermissions

  if (value && Array.isArray(btnPermissions)) {
    const hasPermission = btnPermissions.includes(value);
    if (!hasPermission) {
      // 如果沒有權(quán)限，則移除該元素
      el.parentNode && el.parentNode.removeChild(el);
    }
  } else {
    throw new Error(`需要指定權(quán)限標(biāo)識，如 v-permission="'user:add'"`);
  }
}

export default {
  mounted(el, binding) {
    checkPermission(el, binding);
  },
  updated(el, binding) {
    checkPermission(el, binding);
  }
};

// ...
import permissionDirective from '@/directives/permission';

const app = createApp(App);
app.directive('permission', permissionDirective);
// ...

import { useRoute } from 'vue-router';
// ...
export const useUserStore = defineStore('user', () => {
  // ... 其他狀態(tài) ...
  
  // 計算屬性：獲取當(dāng)前路由的按鈕權(quán)限
  const currentRouteBtnPermissions = computed(() => {
    const route = useRoute();
    return route.meta.btnPermissions || []; // 從當(dāng)前路由的元信息中獲取
  });

  return {
    // ... 其他返回 ...
    currentRouteBtnPermissions
  };
});

<template>
  <div>
    <el-button
      type="primary"
      v-permission="'user:add'"
      @click="handleAdd"
    >新增用戶</el-button>

    <el-button
      type="warning"
      v-permission="'user:edit'"
      @click="handleEdit"
    >編輯</el-button>

    <el-button
      type="danger"
      v-permission="'user:delete'"
      @click="handleDelete"
    >刪除</el-button>

    <el-table :data="tableData">
      <!-- ... -->
    </el-table>
  </div>
</template>