2017-02-28 106 views
1

我在Web开发初学者,下面是我的登录页面代码(在春季启动开发):登录页面链接没有春天的安全

的login.html

<div class="login-page"> 
     <div class="form"> 
     <form class="register-form"> 
      <input type="text" placeholder="name"/> 
      <input type="password" placeholder="password"/> 
      <input type="text" placeholder="email address"/> 
      <button>create</button> 
      <p class="message">Already registered? <a href="#">Sign In</a></p> 
     </form> 
     <form class="login-form"> 
      <input type="text" placeholder="username"/> 
      <input type="password" placeholder="password"/> 
      <button>login</button> 
      <p class="message">Not registered? <a href="#">Create an account</a></p> 
     </form> 
     </div> 
    </div> 

login.css

@import url(https://fonts.googleapis.com/css?family=Roboto:300); 

.login-page { 
    width: 360px; 
    padding: 8% 0 0; 
    margin: auto; 
} 
.form { 
    position: relative; 
    z-index: 1; 
    background: #FFFFFF; 
    max-width: 360px; 
    margin: 0 auto 100px; 
    padding: 45px; 
    text-align: center; 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
} 
.form input { 
    font-family: "Roboto", sans-serif; 
    outline: 0; 
    background: #f2f2f2; 
    width: 100%; 
    border: 0; 
    margin: 0 0 15px; 
    padding: 15px; 
    box-sizing: border-box; 
    font-size: 14px; 
} 
.form button { 
    font-family: "Roboto", sans-serif; 
    text-transform: uppercase; 
    outline: 0; 
    background: #4CAF50; 
    width: 100%; 
    border: 0; 
    padding: 15px; 
    color: #FFFFFF; 
    font-size: 14px; 
    -webkit-transition: all 0.3 ease; 
    transition: all 0.3 ease; 
    cursor: pointer; 
} 
.form button:hover,.form button:active,.form button:focus { 
    background: #43A047; 
} 
.form .message { 
    margin: 15px 0 0; 
    color: #b3b3b3; 
    font-size: 12px; 
} 
.form .message a { 
    color: #4CAF50; 
    text-decoration: none; 
} 
.form .register-form { 
    display: none; 
} 
.container { 
    position: relative; 
    z-index: 1; 
    max-width: 300px; 
    margin: 0 auto; 
} 
.container:before, .container:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 
.container .info { 
    margin: 50px auto; 
    text-align: center; 
} 
.container .info h1 { 
    margin: 0 0 15px; 
    padding: 0; 
    font-size: 36px; 
    font-weight: 300; 
    color: #1a1a1a; 
} 
.container .info span { 
    color: #4d4d4d; 
    font-size: 12px; 
} 
.container .info span a { 
    color: #000000; 
    text-decoration: none; 
} 
.container .info span .fa { 
    color: #EF3B3A; 
} 
body { 
    background: #76b852; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(right, #76b852, #8DC26F); 
    background: -moz-linear-gradient(right, #76b852, #8DC26F); 
    background: -o-linear-gradient(right, #76b852, #8DC26F); 
    background: linear-gradient(to left, #76b852, #8DC26F); 
    font-family: "Roboto", sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;  
} 

login.js

$('.message a').click(function(){ 
    $('form').animate({height: "toggle", opacity: "toggle"}, "slow"); 
}); 

我想补充的,而不是春天secuity登录页面,这个自定义登录页面:

所以我做

public void copnfigure(HttpSecurity httpSecurity) throws Exception{ 
    httpSecurity.authorizeRequests().antMatchers("/**").hasRole("USER") 
    .and() 
    .formLogin().loginPage("login.html").permitAll(); 

} 

但在开始时还是Spring Security的登录页面只有comes.I知道有什么不对,我登录页面(login.html),但无法弄清楚它是什么? 任何帮助表示赞赏。

+1

我有同样的问题。其他人可以有希望解释,但它在我的案例中将login.jsp的名称更改为其他名称时起作用 –

回答

1

loginPage方法需要URL映射以显示登录表单,而不是要呈现的文件名。

public void copnfigure(HttpSecurity httpSecurity) throws Exception { 
    httpSecurity.authorizeRequests().antMatchers("/**").hasRole("USER") 
    .and() 
    .formLogin().loginPage("/login").permitAll(); 
} 

,现在你需要一个控制器:

@Configuration 
public class MvcConfig extends WebMvcConfigurerAdapter { 

    @Override 
    public void addViewControllers(ViewControllerRegistry registry) { 
     registry.addViewController("/login").setViewName("login"); 
    } 
} 

这里,loginlogin.html。您可以查看the guide