如何使用 Angular 添加角色

Question

我遇到了这个问题，当我使用角度形式时无法添加角色，而 JSON 测试邮递员寄存器在前端角色中正确添加，如果有人知道如何解决这个问题，我会很高兴。 提前谢谢你

用户.控制器

 @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!"));
    }

Authentication.Service 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);

Register.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>

Register.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

问题是角度形式设置了一个角色，而您的后端期待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;
    }
  );
}

Authentication.Service 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);
  }
  ...
}