写出vue根据角色赋予不同权限的代码，还有java后端代码

下面是一个简单的示例代码，展示了如何在Vue中根据角色赋予不同的权限：

<template>
  <div>
    <button v-if="isAdmin" @click="deleteUser">删除用户</button>
    <button v-if="isManager" @click="addUser">添加用户</button>
    <button v-if="isUser" @click="editUser">修改用户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: false,
      isManager: false,
      isUser: false
    }
  },
  methods: {
    deleteUser() {
      // 管理员才能执行该操作
    },
    addUser() {
      // 经理才能执行该操作
    },
    editUser() {
      // 普通用户才能执行该操作
    }
  },
  mounted() {
    // 发送请求获取当前用户的角色信息
    axios.get('/api/user/role')
      .then(response => {
        const role = response.data.role
        if (role === 'admin') {
          this.isAdmin = true
        } else if (role === 'manager') {
          this.isManager = true
        } else if (role === 'user') {
          this.isUser = true
        }
      })
  }
}
</script>

在上面的代码中，我们通过发送请求获取后端返回的当前用户的角色信息，然后根据不同的角色，决定是否显示对应的页面或功能。

下面是一个简单的Java后端代码示例，展示了如何根据角色返回对应的数据：

@RequestMapping("/api/user")
@RestController
public class UserController {

  @Autowired
  private UserService userService;

  @GetMapping("/list")
  public List<User> getUserList(HttpServletRequest request) {
    // 获取当前用户的角色信息
    String role = request.getHeader("Authorization");

    // 根据角色返回对应的数据
    if ("admin".equals(role)) {
      return userService.getAllUsers();
    } else if ("manager".equals(role)) {
      return userService.getManagerUsers();
    } else if ("user".equals(role)) {
      return userService.getUserInfo();
    } else {
      // 没有权限，返回空列表
      return new ArrayList<>();
    }
  }
}

在上面的代码中，我们通过获取请求头中的Authorization信息来获取当前用户的角色，然后根据不同的角色，返回对应的数据。需要注意的是，这里我们只是返回了不同的数据，而没有对其进行访问控制，真正的访问控制需要在DAO层或Service层中进行。