Spring Boot+Angular新增用户关联角色时持久化异常及参数问题排查

我正在实现新增用户并关联数据库中已有角色的功能，Angular前端能成功获取角色列表，但新增用户并为其分配多个角色时，Spring Boot后端只能接收到用户基础信息（姓名、邮箱等），无法获取角色数据，且调用JPA的save方法时抛出异常：org.hibernate.PersistentObjectException: detached entity passed to persist: com.app.model.Role。我怀疑问题出在Angular响应式表单对角色数组的处理上，以下是前后端相关代码：

角色数据示例 #

[
    {
        "roleId": 1,
        "name": "USER",
        "description": "Role assigned to regular users who perform regular tasks within the application, such as add or update transactions and companies"
    },
    {
        "roleId": 2,
        "name": "ADMIN",
        "description": "Role assigned to users who can create other users, roles and perform regular users tasks within the Investment application"
    }
]

Angular User组件代码 #

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { Role } from 'src/app/model/Role';
import { User } from 'src/app/model/User';
import { RoleServiceService } from 'src/app/services/role-service.service';
import { UserServiceService } from 'src/app/services/user-service.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  user!: User;
  createForm!:FormGroup;
  errorMessage!:string;
  role: Role[]= [];


  constructor(private userService: UserServiceService,
              private router: Router,
              private roleService: RoleServiceService) { }

  ngOnInit(): void {

    this.getAllRoles();

    this.createForm = new FormGroup({
      'userId': new FormControl(),
      'firstName': new FormControl(null, Validators.required),
      'lastName': new FormControl(null, Validators.required),
      'email': new FormControl(null, Validators.required),
      'password': new FormControl(null, Validators.required),
      'roles': new FormControl()
    });
  }


  onSubmit(){

    this.user = new User(

      this.createForm.get('userId')?.value,
      this.createForm.get('firstName')?.value,
      this.createForm.get('lastName')?.value,
      this.createForm.get('email')?.value,
      this.createForm.get('password')?.value,
      this.createForm.get('roles')?.value

    )

    console.log(this.user);

    this.userService.addUser(this.user).subscribe(
      data=>{
        this.router.navigate([""]);
      }, err=>{
        this.errorMessage = "Unable to add user!";
        console.log(err);
      }
    )

  }

  getAllRoles(){
    this.roleService.getAllRoles().subscribe(
      data=>{
        this.role = data;
        console.log(data);
      }
    )
  }

}

Spring Boot UserService代码 #

@Override
public User addUser(User newUser) throws Exception {
    
    List<User> users = userRepo.findAll();
    
    for(User user: users) {
        if(user.getEmail().equalsIgnoreCase(newUser.getEmail())) {
            throw new Exception("User already exists");
        }
    }
    
    Set<Role> roles = newUser.getRoles();
    
    for (Role role : roles) {
        newUser.addRole(role);
    }
    
    return userRepo.save(newUser);
}

Spring Boot Controller代码 #

@PostMapping("/register")
public ResponseEntity<?> addUser(@RequestBody User user) throws Exception{
        
    System.out.println(user);
    return new ResponseEntity<>(userService.addUser(user), HttpStatus.CREATED);
}

Java User实体 #

import java.time.LocalDateTime;
import java.util.HashSet;
import java.util.Set;

import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.JoinColumn;
import javax.persistence.JoinTable;
import javax.persistence.ManyToMany;
import javax.persistence.Table;
import javax.persistence.Transient;

@Entity
@Table(name = "users")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id", nullable = false, updatable = false)
    private long userId;

    @Column(name = "first_name")
    private String firstName;

    @Column(name = "last_name")
    private String lastName;

    @Column(name = "email")
    private String email;

    @Column(name = "password")
    private String password;

    
    @ManyToMany(cascade = CascadeType.ALL, fetch = FetchType.EAGER)
    @JoinTable(name="user_roles", joinColumns = @JoinColumn(name="user_id", referencedColumnName = "id"),
            inverseJoinColumns = @JoinColumn(name="role_id", referencedColumnName = "id") )
    
    private Set<Role> roles = new HashSet<>();

    public void addRole(Role role) {
        this.roles.add(role);
    }

    public User() {

    }

    public User(String firstName, String lastName, String email, String password, Set<Role> roles) {
        super();
        this.firstName = firstName;
        this.lastName = lastName;
        this.email = email;
        this.password = password;
        this.roles = roles;
    }

    public long getUserId() {
        return userId;
    }

    public void setUserId(long userId) {
        this.userId = userId;
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    
    public Set<Role> getRoles() {
        return roles;
    }

    public void setRoles(Set<Role> roles) {
        this.roles = roles;
    }

    @Override
    public String toString() {
        return "User [userId=" + userId + ", firstName=" + firstName + ", lastName=" + lastName + ", email=" + email
                + ", password=" + password + ", roles=" + roles + "]";
    }

}

Angular User模型 #

import { Role } from "./Role";


export class User{

    constructor(public userId: number,
                public firstName: string,
                public lastName: string,
                public email: string,
                public password:string,
                public roles: Role){

    }
    
}

Java Role实体 #

@Entity
@Table(name = "role")
public class Role {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "id", nullable = false, updatable = false)
private Integer roleId;

@Column(name = "role_name")
private String name;

@Column(name = "description")
private String description;


public Role() {
}

public Role(String name, String description) {
    super();
    this.name = name;
    this.description = description;
    
}

public int getRoleId() {
    return roleId;
}

public void setRoleId(int roleId) {
    this.roleId = roleId;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public String getDescription() {
    return description;
}

public void setDescription(String description) {
    this.description = description;
}
}

Angular Role模型 #

export class Role{

    constructor(public roleId: number,
                public name: string,
                public description:string){

    }

    
}

1. 修正Angular User模型类型错误 #

前端User模型中roles被定义为单个Role对象，但后端需要的是集合类型，修改为数组：

import { Role } from "./Role";

export class User{
    constructor(
        public userId: number,
        public firstName: string,
        public lastName: string,
        public email: string,
        public password:string,
        public roles: Role[] // 改为数组类型，匹配后端Set集合
    ){}
}

2. 修复表单角色绑定逻辑 #

确保前端模板中角色多选控件正确绑定到表单的roles数组，示例模板代码：

<div>
  <label>分配角色：</label>
  <div *ngFor="let role of role">
    <input type="checkbox" 
           [formControl]="createForm.get('roles')" 
           [value]="role" 
           (change)="updateRoles(role, $event.target.checked)">
    <span>{{role.name}}</span>
  </div>
</div>

同时添加updateRoles方法维护选中的角色数组：

updateRoles(role: Role, isChecked: boolean) {
  const roles = this.createForm.get('roles')?.value || [];
  if (isChecked) {
    roles.push(role);
  } else {
    const index = roles.findIndex(r => r.roleId === role.roleId);
    if (index !== -1) roles.splice(index, 1);
  }
  this.createForm.get('roles')?.setValue(roles);
}

3. 解决JPA游离实体异常 #

后端抛出的异常是因为前端传递的Role对象是游离态（带有主键但不在当前持久化上下文），且CascadeType.ALL会触发对Role的持久化操作，但Role已存在于数据库。

• 修改User实体的@ManyToMany注解，移除级联操作：

@ManyToMany(fetch = FetchType.EAGER) // 去掉CascadeType.ALL
@JoinTable(name="user_roles", 
           joinColumns = @JoinColumn(name="user_id", referencedColumnName = "id"),
           inverseJoinColumns = @JoinColumn(name="role_id", referencedColumnName = "id") )
private Set<Role> roles = new HashSet<>();

• 在UserService中，将前端传递的Role转换为数据库中的持久态对象：

@Override
public User addUser(User newUser) throws Exception {
    // 检查邮箱重复逻辑保留
    List<User> users = userRepo.findAll();
    for(User user: users) {
        if(user.getEmail().equalsIgnoreCase(newUser.getEmail())) {
            throw new Exception("User already exists");
        }
    }

    Set<Role> persistedRoles = new HashSet<>();
    for (Role role : newUser.getRoles()) {
        // 通过主键查询数据库中的持久态角色
        Role persistedRole = roleRepo.findById(role.getRoleId())
                                     .orElseThrow(() -> new Exception("Role not found: " + role.getRoleId()));
        persistedRoles.add(persistedRole);
    }
    newUser.setRoles(persistedRoles);

    return userRepo.save(newUser);
}

4. 验证前端请求数据结构 #

提交前打印this.user，确保roles是数组且每个元素包含roleId字段，保证后端能正确序列化。

内容的提问来源于stack exchange，提问作者Learner