2016-09-24 9 views
1

thisチュートリアルに従いましたが、私はFetch APIを使ってRESTリポジトリを照会しました。私の問題は、成功した認証の後にすべてfetch()呼び出しはログインフォームhtml文字列を含む応答を返します。フェッチAPIを使用して安全なスプリングブートアプリケーションで資格情報を送信

fetch(`${root}/employees?size=${pageSize}`, { 
    method: 'GET', 
    headers: new Headers({'Content-Type': 'application/json', 
      'Authorization': 'Basic '+btoa('greg:turnquist'))}) 

すべての作品を、この:私はfetchに承認してヘッダを追加する場合

localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token < in 
JSON at position 0 

:具体的には、この種のコード

fetch(`${root}/employees?size=${pageSize}`).then(p => p.json()}) 

はクロームコンソールで次のエラーを生成しますすべての努力がSpring Securitybeansに設定された後に馬鹿に見えますが、これはベストプラクティスではありません。

すべてのJavaソースはチュートリアルのと同じ残りますが、私はここで設定クラスからの断片が含ま:

SecurityConfiguration.java

@Configuration 
@EnableWebSecurity 
@EnableGlobalMethodSecurity(prePostEnabled = true) 
public class SecurityConfiguration extends WebSecurityConfigurerAdapter { 

    @Autowired 
    private SpringDataJpaUserDetailsService userDetailsService; 

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

    @Override 
    protected void configure(HttpSecurity http) throws Exception { 
     http 
      .authorizeRequests() 
       .antMatchers("/build/**", "/main.css").permitAll() 
       .anyRequest().authenticated() 
       .and() 
      .formLogin() 
       .defaultSuccessUrl("/", true) 
       .permitAll() 
       .and() 
      .httpBasic() 
       .and() 
      .csrf().disable() 
      .logout() 
       .logoutSuccessUrl("/"); 
    } 

} 

@Component 
public class SpringDataJpaUserDetailsService implements UserDetailsService { 

    private final ManagerRepository repository; 

    @Autowired 
    public SpringDataJpaUserDetailsService(ManagerRepository repository) { 
     this.repository = repository; 
    } 

    @Override 
    public UserDetails loadUserByUsername(String name) throws UsernameNotFoundException { 
     Manager manager = this.repository.findByName(name); 
     return new User(manager.getName(), manager.getPassword(), 
       AuthorityUtils.createAuthorityList(manager.getRoles())); 
    } 

} 

EmployeeRepository.java

@PreAuthorize("hasRole('ROLE_MANAGER')") 
public interface EmployeeRepository extends PagingAndSortingRepository<Employee, Long> { 

    @Override 
    @PreAuthorize("#employee?.manager == null or #employee?.manager?.name == authentication?.name") 
    Employee save(@Param("employee") Employee employee); 

    @Override 
    @PreAuthorize("@employeeRepository.findOne(#id)?.manager?.name == authentication?.name") 
    void delete(@Param("id") Long id); 

    @Override 
    @PreAuthorize("#employee?.manager?.name == authentication?.name") 
    void delete(@Param("employee") Employee employee); 

} 

私の質問は、追加のセキュリティ設定なしで新しいjavascriptフェッチAPIを使用して承認済みページからクレデンシャルを送信してRESTリポジトリとやりとりする方法です。

答えて

0

問題の根本は、fetch()はデフォルトでCookieを送信しないということです。だから私は、optionsオブジェクトを要求するcredentials: 'include'を追加する必要があります

fetch(`${root}/employees?size=${pageSize}`, { 
    method: 'GET', 
    credentials: 'include'}) 

references

関連する問題