2017-04-24 17 views
0

我在programmation絲毫angularJS 所以我想在MVC應用程序絲毫AngularSpring bootthymeleaf爲themplate編程新。狀態404時,我設置了AngularJS路線

與我的工作是如下的邏輯: 所有傳入的請求首先必須穿過Spring security,這最後發送請求到使用thymeleaf登錄頁面。 如果連接正確完成,那麼Spring安全性將請求返回到index.html,在這個級別,我希望只有角度會使請求路由。

當我只用UI路由器一切工作正常,但我的網址是這樣http://localhost: 8090/#!/home它讓我錯了,所以我用html5Mode到不幸的是解決這個問題 ,這些請求都是這樣發回春: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

我認爲你需要爲你的索引文件靜態地避免這種情況。您不希望瀏覽Spring請求匹配代碼,您希望讓角度執行路由並在需要填充視圖的資源時向服務器發出請求。也許給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)在春季指南中可以幫助您走上正確的軌道。 –