Как я могу добавить роли, используя Angular

Question

У меня была эта проблема, роли не могут быть добавлены, когда я использую форму angular, тогда как JSON тестовый регистр почтальона, добавленный здесь правильно, в ролях внешнего интерфейса всегда пуст, если у кого-то есть идея, как я могу решить эту проблему, я буду радоваться. Заранее спасибо

User.Controller

 @PostMapping("/signup")
    public ResponseEntity<?> registerUser(@Valid @RequestBody RegistrationForm signUpRequest) {
       if (utilisateurRepository.existsByUsername(signUpRequest.getUsername())) {
            return ResponseEntity
                    .badRequest()
                    .body(new MessageResponse("Error: Username is already taken!"));
        }

        if (utilisateurRepository.existsByEmail(signUpRequest.getEmail())) {
            return ResponseEntity
                    .badRequest()
                    .body(new MessageResponse("Error: Email is already in use!"));
        }

        Set<String> strRoles = signUpRequest.getRoles();

        Set<Role> roles = new HashSet<>();

        if (strRoles == null) {
            Role userRole = roleRepository.findByName(ERole.ROLE_USER)
                    .orElseThrow(() -> new RuntimeException("Error: Role is not found."));
            roles.add(userRole);

        } else {
            strRoles.forEach(role -> {
                switch (role) {
                    case "admin":
                        Role adminRole = roleRepository.findByName(ERole.ROLE_ADMIN)
                                .orElseThrow(() -> new RuntimeException("Error: Role is not found."));
                        roles.add(adminRole);

                        break;


                    default:
                        Role aideRole = roleRepository.findByName(ERole.ROLE_AIDESOIGNANTE )
                                .orElseThrow(() -> new RuntimeException("Error: Role is not found."));
                        roles.add(aideRole);
                }
            });
        }
        // Create new user's account
        Utilisateur user = new Utilisateur(signUpRequest.getUsername(),
                signUpRequest.getEmail(),
                passwordEncoder.encode(signUpRequest.getPassword()), signUpRequest.getTelephone(), roles);

        user.setRoles(roles);
        utilisateurRepository.save(user);

        return ResponseEntity.ok(new MessageResponse("User registered successfully!"));
    }

Аутентификация. Сервис Angular

 register(user): Observable<any> {
    return this.http.post(AUTH_API + 'signup', {
      username: user.username,
      email: user.email,
      telephone: user.telephone,
      role: user.role,
      password: user.password
    }, httpOptions);

Регистрация. Html

 <div class="form-group">
          <label for="role">Role</label>
          <input
            type="text"
            class="form-control"
            name="role"
            [(ngModel)]="form.role"
            required
            #role="ngModel"
          />

        </div>

Регистрация.ts

 onSubmit() {
    this.authService.register(this.form).subscribe(
      data => {
        console.log(data);
        this.isSuccessful = true;
        this.isSignUpFailed = false;
      },
      err => {
        this.errorMessage = err.error.message;
        this.isSignUpFailed = true;
      }
    );
  }

Answer 1

Проблема в том, что angular формы устанавливают одну роль, а ваш бэкэнд ожидает roles (во множественном числе). Вы можете решить эту проблему следующим образом:

onSubmit() {
  // use rest operator to get a rest object without role
  const {role, ...rest} = this.form;

  // build userData, containing the role collected above
  // SignUpData is declared on Authentication.service
  const userData: SignUpData = {...rest, roles: [role]};

  // use the userData in your request
  this.authService.register(userData).subscribe(
    data => {
      console.log(data);
      this.isSuccessful = true;
      this.isSignUpFailed = false;
    },
    err => {
      this.errorMessage = err.error.message;
      this.isSignUpFailed = true;
    }
  );
}

Аутентификация. Сервис Angular

export interface SignUpData {
  username: string;
  email: string;
  telephone: string;
  roles: string[];
  password: string;
}

@Injectable({providedIn: 'root'})
export class AuthenticationService {

  ...
  register(user: SignUpData): Observable<any> {
    return this.http.post(AUTH_API + 'signup', user, httpOptions);
  }
  ...
}