vue 动态路由菜单,按钮权限

Vue是一种流行的前端框架，可以帮助我们构建动态路由菜单和按钮权限功能。

动态路由菜单是指菜单根据用户角色或权限动态生成的功能。在Vue中，我们可以使用Vue Router来实现动态路由菜单。首先，我们需要定义一个菜单数据，包含菜单的名称、路径和图标等信息。然后，根据用户的角色或权限，动态生成菜单项，并根据用户的点击事件来跳转到对应的路由页面。

按钮权限是指根据用户的角色或权限来处理按钮的显示和点击事件。在Vue中，我们可以使用v-if或者v-show指令来根据用户角色或权限来控制按钮的显示或隐藏。当用户点击按钮时，我们可以根据用户的角色或权限来处理相应的逻辑。

具体实现动态路由菜单和按钮权限的方法有很多种，可以根据项目的需要选择适合的方案。一种常见的方法是在用户登录成功后，从后端获取用户的角色或权限信息，并根据这些信息来动态生成菜单和按钮权限。

总结来说，Vue的动态路由菜单和按钮权限功能可以帮助我们根据用户的角色或权限来动态生成菜单和控制按钮的显示和点击事件。这样可以提高用户的体验和安全性。

相关问题

vue3 左侧菜单动态路由

### Vue3 实现左侧菜单动态路由配置

#### 路由与菜单结构设计
为了实现基于用户权限的动态路由和菜单，在项目初始化阶段应构建基础框架。考虑到不同角色拥有不同的访问权限，需预先规划好哪些页面属于公共部分，哪些则受权限限制[^2]。

#### 创建动态路由表
通过向后台请求获取当前登录用户的可访问资源列表，并据此生成对应的前端路由对象数组。每个路由项通常包含`path`, `component`, 和用于描述性的元数据(`meta`)字段，其中`meta`可用于存储诸如菜单名、图标样式等辅助信息[^3]。

// src/api/menu.js 示例API调用函数
export function getMenuList() {
    return axios.get('/api/menus');
}

// store/modules/app.ts Vuex模块处理逻辑片段
import { defineStore } from "pinia";
import type { RouteRecordRaw } from 'vue-router';
import { useRouter } from 'vue-router';

const useAppStore = defineStore('app', {
  state: () => ({
    dynamicRoutes: [] as Array<RouteRecordRaw>,
  }),
  
  actions: {
    async setDynamicRoutes() {
      try {
        const response = await getMenuList();
        this.dynamicRoutes = buildRouteFromMenu(response.data);
        
        // 添加到全局路由器实例中
        const router = useRouter();
        this.dynamicRoutes.forEach(route => {
          router.addRoute(route); 
        });
      } catch (error) {
        console.error(error);
      }
    },
    
    // 构建路由的方法...
  }
});

#### 渲染侧边栏组件
对于菜单UI层面上的表现形式，则依赖于具体的设计稿来决定采用何种方式呈现给终端使用者。一般情况下，可以通过遍历上述提到过的带有`meta`属性的对象集合来进行DOM节点拼接工作；同时配合CSS框架完成美化效果[^1]。

<!-- components/Sidebar.vue -->
<template>
  <el-menu :default-active="activePath">
    <sidebar-item v-for="(item, index) in menuData" :key="index" :data="item"/>
  </el-menu>
</template>

<script setup lang="ts">
import SidebarItem from './SidebarItem.vue'
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useAppStore } from '@/store/modules/app'

const route = useRoute()
const appStore = useAppStore()

const activePath = computed(() => route.path)

defineProps<{
  menuData?: any[]
}>()
</script>

<!-- components/SidebarItem.vue 单个菜单项模板 -->
<template>
  <div v-if="!isHidden(item)">
    <!-- 多级菜单展开收缩按钮 -->
    <el-submenu v-if="hasChildren(item)" :index="String(index)">
      <template slot="title">{{ item.meta.menuName }}</template>
      <sidebar-item v-for="(child, i) in item.children" :key="i" :data="child"></sidebar-item>
    </el-submenu>
    
    <!-- 直达链接 -->
    <router-link v-else class="submenu-title-noDropdown" to={item.path}>
      {{ item.meta.menuName }}
    </router-link>
  </div>
</template>

<script setup lang="ts">
interface MenuItemType {
  meta: Record<string, unknown>;
  children?: MenuItemType[];
}

function isHidden(menuItem: MenuItemType): boolean {
  return menuItem?.meta?.hidden === true;
}

function hasChildren(menuItem: MenuItemType): boolean {
  return Array.isArray(menuItem.children) && menuItem.children.length > 0;
}

defineProps<{
  data: MenuItemType,
  index: number
}>()
</script>

vue权限控制-- 路由鉴权，菜单动态渲染，自定义指令渲染按钮，递归处理数据

Vue.js权限控制主要涉及以下几个方面：

1. **路由鉴权** (Route Authorization)：在 Vue 中，可以利用 `beforeEach` 或 `async beforeEach` 钩子函数，在每次路由跳转之前检查用户是否有访问当前路径的权限。如果用户无权访问，可以返回 `redirect` 或 `next(false)` 来阻止路由切换。

router.beforeEach((to, from, next) => {
  // 检查用户权限
  checkUserPermission(to.name).then(hasPermission => {
    if (hasPermission) {
      next();
    } else {
      next('/not-permitted');
    }
  });
});

2. **菜单动态渲染** (Dynamic Menu Rendering)：基于用户的权限信息，可以在组件挂载时或者登录状态改变时，更新 `v-for` 中的数据源，只展示用户有权限访问的菜单项。

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.path">
      {{ item.label }}
      <!-- 如果用户有权限则显示 -->
      <router-link :to="item.path" v-if="checkPermission(item.permission)">
        ...
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    menuItems() {
      return this.getUserPermissions().map(permissionItem => ({
        ...permissionItem,
        path: `/some-route/${permissionItem.id}`,
      }));
    },
  },
  methods: {
    checkPermission(permission) {
      return permission.some(currentPermission => this.userPermissions.includes(currentPermission));
    },
    getUserPermissions() {
      // 获取用户实际拥有的权限数组
    },
  },
};
</script>

3. **自定义指令渲染按钮** (Custom Directive for Button Rendering): 可以创建一个自定义指令如 `v-has-role`，在满足特定角色条件时才显示按钮。例如，只有管理员才能看到“删除”按钮。

<button v-has-role="admin">删除</button>

4. **递归处理数据** (Recursive Data Processing): 当数据结构包含嵌套的对象或数组时，需要使用递归来遍历和处理。可以编写一个通用的 `forEach` 或者 `map` 函数，配合 `v-for` 和 `if` 条件判断，对每个层级的数据进行权限检查。

<template>
  <div>
    <ul v-for="(item, index) in data" :key="index">
      <li v-if="checkPermission(item.permission)">
        {{ item.label }}
        <!-- 子级菜单同理 -->
        <ul v-for="subItem in item.subItems">
          <li v-if="checkPermission(subItem.permission)">
            {{ subItem.label }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>