2017-04-24 6 views
0

を設定するときに私はプログラム書き込みの聖霊降臨祭のangularJS で新しいので、私はthemplateとしてMVCアプリケーションの聖霊降臨祭AngularSpring bootthymeleafでプログラムしたいのです。ステータス404私はAngularJSルート

私は次のようにある作業に使用するロジック: すべての着信要求が最初Spring securityを通過しなければならない、この最後はthymeleafを使用してログインページに要求を送信します。 接続が正しく行われた場合、Springセキュリティはindex.htmlにリクエストを返します。このレベルでは、要求のルーティングを行う角度だけが必要です。

私がのみを使用する場合、UI-ルータすべてが正常に動作しますが、私は残念ながら この問題を解決するためにhtml5Modeを使用し、それは私が間違っていましたhttp://localhost: 8090/#!/homeこのように私のURLは、要求は次のように戻って春に送られている:http://localhost.com/8090/homeありません404

マイ設定SpringSecurityをそれらを見つけると種類のエラーが表示されます。

@Configuration 
@EnableWebSecurity 
public class SecurityConfig extends WebSecurityConfigurerAdapter { 

    @Autowired 
    public void globalConfig(AuthenticationManagerBuilder auth, @Qualifier("dataSource") DataSource dataSource) throws Exception{ 
     auth.jdbcAuthentication() 
       .dataSource(dataSource) 
       .usersByUsernameQuery("select username as principal, password as credentials, true from users where username = ?") 
       .authoritiesByUsernameQuery("select user_username as principal, roles_role as role from users_roles where user_username = ?") 
       .rolePrefix("ROLE_"); 
    } 

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

     http 
       .csrf().disable() 
       .authorizeRequests() 
        .antMatchers("/dist/**","/js/**","/assets/**","/css/**","/public/**").permitAll() 
        .anyRequest() 
         .authenticated() 
          .and() 
       .formLogin() 
        .loginPage("/login") 
        .permitAll() 
       .defaultSuccessUrl("/") 
        .and() 
       .logout() 
        .invalidateHttpSession(true) 
        .logoutUrl("/logout") 
        .permitAll(); 
    } 
} 

マイ/templates/login.htmlページ:

<!DOCTYPE html> 
<html xmlns:th="http://www/thymeleaf.org"> 
<head> 
    <meta charset="UTF-8"/> 
    <title>Connexion</title> 
    <link rel="stylesheet" th:href="@{dist/css/bootstrap.css}"/> 
    <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/> 
    <link rel="stylesheet" th:href="@{css/login.css}"/> 

</head> 

<body> 
<form th:action="@{/login}" method="post"> 
    <div class="login-form"> 
    <h1>Guichet unique</h1> 
     <div th:if="${param.error}" class="text-warning">Login ou mot de passe incorrect</div> 
     <div th:if="${param.logout}" class="text-primary">Vous avez déconnecté</div> 
    <div class="form-group "> 
     <input type="text" class="form-control" placeholder="Email" name="username" id="UserName"/> 
     <i class="fa fa-user"></i> 
    </div> 
    <div class="form-group log-status"> 
     <input type="password" class="form-control" placeholder="Password" name="password" id="Passwod"/> 
     <i class="fa fa-lock"></i> 
    </div> 
     <span class="alert">Invalid Credentials</span> 
     <a class="link" href="#">Mot de passe oublié?</a> 
    <button type="submit" class="log-btn" >Se connecter</button> 
    </div> 
</form> 
</body> 
</html> 

/static/js/modules/routes/routes.js:

app.config(['$stateProvider','$urlRouterProvider','$locationProvider',function ($stateProvider, $urlRouterProvider,$locationProvider) { 
    //$locationProvider.html5Mode(true); 
    $stateProvider 
     .state('accueil', { 
      url: '/acceuil', 
      templateUrl: 'js/modules/Accueil/partials/accueil.html', 
      controller: 'AccueilCtrl' 
     }) 
     .state('hello', { 
      url: '/hello', 
      templateUrl: 'js/modules/Accueil/partials/hello.html', 
      controller: 'AccueilCtrl' 
     }) 
    $urlRouterProvider.otherwise('/acceuil'); 
}]); 

答えて

0

私はあなたがこの問題を回避するために静的にインデックスファイルを提供する必要があると思います。あなたは、バネ要求の一致コードを通過したくない場合は、角度をルーティングし、ビューにデータを入れるためのリソースが必要なときにサーバにリクエストを行うようにします。多分thisを試してみてください。

私はthis replyが関連する問題に答えると思います。

+0

同じ問題が、http:// localhost:8090/homeというタイプのリクエストを送信したときに予期しないエラー(type = Not Found、status = 404)がありました。 –

+0

私は[このチュートリアルのレポ](春のガイドのhttps://github.com/spring-guides/tut-spring-security-and-angular-js/tree/master/modular)はあなたが正しい道に乗るのを助けることができると思います。 –