Vue3 按钮权限和页面权限实现指南 - 路由守卫和动态路由

Vue3 的按钮权限和页面权限是通过路由守卫和动态路由来实现的。

1. 页面权限：在路由配置中，可以通过 meta 字段设置页面的权限信息，如下所示：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { requiresAuth: true } // 需要登录才能访问
  },
  {
    path: '/user',
    component: User,
    meta: { requiresAdmin: true } // 需要管理员权限才能访问
  }
]

然后在全局路由守卫中判断用户是否有访问该页面的权限：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !user) {
    next('/login') // 如果需要登录但是用户未登录，则跳转到登录页面
  } else if (to.meta.requiresAdmin && !isAdmin) {
    next('/403') // 如果需要管理员权限但是用户不是管理员，则跳转到 403 页面
  } else {
    next() // 否则放行
  }
})

2. 按钮权限：在页面中，可以通过 v-if 或 v-show 指令来控制按钮的显示或隐藏，根据用户的权限来决定是否显示该按钮。例如：

<button v-if='isAdmin'>管理用户</button>
<button v-if='isOwner'>编辑文章</button>

在页面中，需要根据用户的权限来动态计算 isAdmin 和 isOwner 的值，然后根据这些值来决定按钮的显示或隐藏。