Angular，Spring Security性：MYSQL基本登录

Question

我尝试创建一个简单的登录和注册页面。Fronted由Spring框架中的后端制作。用户数据保存在MYSQL数据库中。我的问题是，我不知道如何在后端用数据库检查我的凭据。成功登录后，我想重定向到/欢迎页面并打印错误消息。另外，我不知道登录endpoint是否正确。在angular中调用/basicauth或在表单中调用/login？

我还有一个注册页面，可以在数据库中存储新用户。

我的错误控制台。日志

CORS策略阻止从http://localhost:8080/basicauthhttp://localhost:4200访问XMLHttpRequest：对预飞行请求的响应不通过权限改造检查：不允许对预飞行请求进行重定向。login.component.ts:33HttpEr趋势响应

使用者JAVA

@Entity
@Table(name = "user")
public class User{
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private int id;

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

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

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

@Column(name="status")
private boolean status;

public User() {
}

public User(String name, String password) {
    this.name = name;
    this.password = password;
}

public int getId() {
    return id;
}

public void setId(int id) {
    this.id = id;
}

public String getName() {
    return name;
}

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

public String getPassword() {
    return password;
}

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

public String getRole() {
    return role;
}

public void setRole(String role) {
    this.role = role;
}

public boolean getStatus() {
    return status;
}

public void setStatus(boolean status) {
    this.status = status;
}
}

用户控制器

@CrossOrigin(origins="http://localhost:4200")
@RestController
public class UserController {

@Autowired
private UserService userService;

@GetMapping(path="/basicauth")
public AuthenticationBean helloWorldBean(){
    //throw new RuntimeException("Some Error");
    return new AuthenticationBean("You are authenticated");
}

@PostMapping("/registration")
public User create(@RequestBody Map<String, String> body){
    String username = body.get("username");
    String password = body.get("password");
    return userService.saveUser(new User(username, password));
}
}

MyUserDetails服务

@Service
public class MyUserDetailsService implements UserDetailsService {

@Autowired
private UserService userService;

@Override
@Transactional
public UserDetails loadUserByUsername(String userName) {
    User user = userService.findUserByName(userName);
    List<GrantedAuthority> authorities = getUserAuthority(user.getRole());
    return buildUserForAuthentication(user, authorities);
}

private List<GrantedAuthority> getUserAuthority(String userRoles) {
    Set<GrantedAuthority> roles = new HashSet<>();

    roles.add(new SimpleGrantedAuthority(userRoles));

    return new ArrayList<>(roles);
}

private UserDetails buildUserForAuthentication(User user, List<GrantedAuthority> authorities) {
    return new org.springframework.security.core.userdetails.User(user.getName(), user.getPassword(),
            user.getStatus(), true, true, true, authorities);
}
}

用户服务

@Service
public class UserService {

private UserRepository userRepository;
private BCryptPasswordEncoder bCryptPasswordEncoder;

@Autowired
public UserService(UserRepository userRepository,
                   BCryptPasswordEncoder bCryptPasswordEncoder) {
    this.userRepository = userRepository;
    this.bCryptPasswordEncoder = bCryptPasswordEncoder;
}


public User findUserByName(String userName) {
    return userRepository.findByName(userName);
}

public User saveUser(User user) {
    user.setPassword(bCryptPasswordEncoder.encode(user.getPassword()));
    user.setName(user.getName());
    user.setStatus(true);
    user.setRole("USER");
    return userRepository.save(user);
}

}

网络配置

@Configuration
@EnableWebSecurity
public class WebSecurityConfiguration extends WebSecurityConfigurerAdapter {

@Autowired
private BCryptPasswordEncoder bCryptPasswordEncoder;

@Autowired
private MyUserDetailsService userDetailsService;



@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
    auth
            .userDetailsService(userDetailsService)
            .passwordEncoder(bCryptPasswordEncoder);
}

@Override
protected void configure(HttpSecurity http) throws Exception {

    String loginPage = "/login";
    String logoutPage = "/logout";

    http.
            authorizeRequests()
            .antMatchers("/").permitAll()
            .antMatchers(loginPage).permitAll()
            .antMatchers("/registration").permitAll()
            .antMatchers("/admin/**").hasAuthority("ADMIN")
            .anyRequest()
            .authenticated()
            .and().csrf().disable()
            .formLogin()
            .loginPage(loginPage)
            .loginPage("/")
            .failureUrl("/login?error=true")
            .defaultSuccessUrl("/welcome")
            .usernameParameter("username")
            .passwordParameter("password")
            .and().logout()
            .logoutRequestMatcher(new AntPathRequestMatcher(logoutPage))
            .logoutSuccessUrl(loginPage).and().exceptionHandling();
}

@Override
public void configure(WebSecurity web) throws Exception {
    web
            .ignoring()
            .antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**");
}

}

ervice.ts

    export class HttpIntercepterBasicAuthService {

    constructor(
    private basicAuthenticationService: BasicAuthenticationService
  ) { }

  intercept(request: HttpRequest<any>, next: HttpHandler){

    const basicAuthHeaderString = this.basicAuthenticationService.getAuthenticatedToken();
    const username = this.basicAuthenticationService.getAuthenticatedUser()

    if (basicAuthHeaderString && username) {
      request = request.clone({
        setHeaders : {
          Authorization : basicAuthHeaderString
        }
      });
    }
    return next.handle(request);
    }
    }

基本认证服务。ts

    export const TOKEN = 'token';
    export const AUTHENTICATEDUSER = 'authenticaterUser';

    @Injectable({
     providedIn: 'root'
    })

  export class BasicAuthenticationService {

  constructor(private http: HttpClient) { }

  executeAuthenticationService(username, password) {

    const basicAuthHeaderString = 'Basic ' + window.btoa(username + ':' + password);
    const headers = new HttpHeaders(
      {Authorization: basicAuthHeaderString}
    )
    return this.http.get<AuthenticationBean>(`${API_URL}/basicauth`,
      {headers}).pipe(
      map(data => {
        sessionStorage.setItem(AUTHENTICATEDUSER, username);
        sessionStorage.setItem(TOKEN, basicAuthHeaderString);
        return data;
      })
    );

  }

  getAuthenticatedUser() {
    return sessionStorage.getItem(AUTHENTICATEDUSER);
  }

  getAuthenticatedToken() {
    if (this.getAuthenticatedUser()) {
      return sessionStorage.getItem(TOKEN);
    }
  }

  logout() {
    sessionStorage.removeItem(AUTHENTICATEDUSER);
    sessionStorage.removeItem(TOKEN);
  }

  isLoggedIn() {
    const user = sessionStorage.getItem(AUTHENTICATEDUSER);
    return !(user === null);
  }
}

export class AuthenticationBean{
  constructor(public message: string) { }
}

登录组件。ts

export class LoginComponent implements OnInit {

  username = '';
  password = '';
  errorMessage = 'Špatné přihlašovací údaje';
  invalidLogin = false;
  // router

  constructor(private router: Router,
              private basicAuthenticationService: BasicAuthenticationService) { }

  ngOnInit() {
  }

  handleLogin() {
    this.basicAuthenticationService.executeAuthenticationService(this.username, this.password)
      .subscribe(
        data => {
          console.log(data);
          this.router.navigate(['welcome']);
          this.invalidLogin = false;
        },
        error => {
          console.log(error);
          this.invalidLogin = true;
        }
      );
    // redirect welcome page
  }

}

Answer 1

将请求从Angular应用程序重定向到后端服务器时出现问题，因为前端应用程序尝试从其他域访问后端。要解决此问题，请使用角度代理：https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md