vue按钮权限，根据v-if来实现，管理员账号是admin，这个功能的前后端代码怎么写

前端代码：

<template>
  <div>
    <button v-if="isAdmin">只有管理员可见的按钮</button>
    <button v-else>普通用户可见的按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: null // 当前用户对象，从后端获取
    }
  },
  computed: {
    isAdmin() {
      return this.user && this.user.role === 'admin' // 用户对象存在且角色为管理员时返回 true
    }
  }
}
</script>

后端代码：

假设你使用的是 Node.js 并且已经实现了用户身份认证，可以在路由处理函数中添加权限验证的逻辑，示例代码如下：

app.get('/admin-only-api', (req, res) => {
  const user = req.user // 假设已经通过身份认证并从数据库中查询出了当前用户对象
  if (user && user.role === 'admin') {
    // 只有管理员才能访问的接口逻辑
    res.json({ message: '只有管理员才能看到的数据' })
  } else {
    res.status(403).json({ error: '无权限访问' })
  }
})

在上面的代码中，我们判断了当前用户是否存在，以及用户角色是否为管理员。如果符合条件则返回数据，否则返回 403 状态码和错误信息。需要注意的是，这里只是一个示例代码，实际上的权限验证需要根据具体业务逻辑进行设计。