vue实现动态路由按钮

实现动态路由按钮的思路

动态路由按钮通常指根据用户权限或角色动态显示可访问的路由按钮。Vue中可通过路由配置、权限验证和动态渲染实现。

路由配置与权限标识

在路由配置中添加meta字段标识权限：

const routes = [
  {
    path: '/admin',
    component: AdminPage,
    meta: { requiresAuth: true, permission: 'admin' }
  },
  {
    path: '/user',
    component: UserPage,
    meta: { requiresAuth: true, permission: 'user' }
  }
]

获取用户权限信息

用户登录后保存权限信息到Vuex或Pinia：

// Vuex示例
state: {
  userPermissions: ['user'] // 从接口获取的实际权限
}

权限验证方法

创建全局方法检查权限：

// main.js
Vue.prototype.$hasPermission = function (requiredPermission) {
  const userPermissions = this.$store.state.userPermissions
  return userPermissions.includes(requiredPermission)
}

动态渲染按钮组件

使用v-if根据权限控制按钮显示：

<template>
  <div>
    <button 
      v-if="$hasPermission('admin')"
      @click="$router.push('/admin')"
    >管理后台</button>

    <button 
      v-if="$hasPermission('user')"
      @click="$router.push('/user')"
    >用户中心</button>
  </div>
</template>

路由守卫控制访问

在全局路由守卫中验证权限：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.isLoggedIn) {
    return next('/login')
  }

  if (to.meta.permission && !Vue.prototype.$hasPermission(to.meta.permission)) {
    return next('/unauthorized')
  }

  next()
})

动态生成导航菜单

根据权限过滤路由生成菜单：

computed: {
  allowedRoutes() {
    return this.$router.options.routes.filter(route => {
      return !route.meta?.permission || this.$hasPermission(route.meta.permission)
    })
  }
}

响应权限变化

当用户权限变更时，需要清除路由缓存：

watch: {
  '$store.state.userPermissions'() {
    this.$forceUpdate() // 强制重新渲染
  }
}

服务端权限验证

前端验证只是辅助，关键操作需服务端验证：

async function fetchData() {
  try {
    const res = await axios.get('/api/data', {
      headers: { Authorization: `Bearer ${token}` }
    })
    return res.data
  } catch (err) {
    if (err.response.status === 403) {
      this.$router.push('/unauthorized')
    }
  }
}

以上方案实现了完整的动态路由按钮控制流程，包括前端显示控制和服务端验证，确保系统安全性。实际项目中可根据具体需求调整权限颗粒度和验证逻辑。