如何使用 Angular 添加角色

Posted 2023-02-27

【中文标题】如何使用 Angular 添加角色

【英文标题】：How can I add roles using Angular

【发布时间】：2020-08-11 16:54:56

【问题描述】：

我遇到了这个问题，当我使用角度形式时无法添加角色，而 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;
      
    );
  

【问题讨论】：

谁在调用你的register 方法？显示代码。

这里是注册组件我编辑我的问题你现在可以检查它

【参考方案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);
  
  ...

【讨论】：

我刚刚修复了答案中的前两行。根据您的打字稿配置，它会给您一条错误消息。

角色仍然添加为 ROLE_USER，即角色为空

那个对象...this.form...是您的控制还是您的数据？你是如何声明/使用它的？

浏览器的开发工具上有什么？能否提供表单数据？

我刚刚注意到您的 register 方法正在撤消我刚刚在回答中所做的事情。我也会修复注册方法。