Question

我是程序化whit angularJS的新手所以我想在MVC应用程序中编程，以Angular，Spring boot和thymeleaf作为模板。

我工作的逻辑如下：所有传入请求首先必须通过Spring security，最后将请求发送到使用thymeleaf的登录页面。如果连接正确完成，那么Spring安全性会将请求返回给index.html，在此级别，我希望只有角度来进行请求的路由。

当我只使用ui-router一切正常但我的网址就像这样http://localhost: 8090/#!/home它让我弄错了所以我使用html5Mode来解决这个问题不幸的是，请求被发送回Spring，如下所示：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');
}]);

Answer 1

我认为您需要静态地提供索引文件以避免这种情况。您不希望通过spring请求匹配代码，您希望让angular执行路由并在需要填充视图的资源时向服务器发出请求。也许试试this？

我认为this reply回答了相关问题。

我设置AngularJS路线时的状态404

1 个答案: