如何使用spring security和vue.js设置登录?

ukqbszuj  于 2021-07-08  发布在  Java
关注(0)|答案(2)|浏览(495)

我目前正在使用spring(带spring security)和vue.js开发一个web应用程序。我以前构建过一些web应用程序,但它们只是用于学校用途,所以在身份验证和授权方面,它们大多是不完整的。所以,正如你所看到的,我对spring boot和spring security之类的东西真的没有经验。
我的项目按以下方式设置:
项目文件夹
project server( Spring ->localhost:9000)
project web(vue.js cli->localhost:8080)
我遵循了一个实现Spring Security 的教程,现在,我可以使用内置的登录表单使用存储在mysql数据库中的凭据来验证我的用户。
问题是我不想使用这个登录页,我想在我的前端项目中创建我自己的。我已经查过了,我可以更改登录页,但我相信它需要在我的资源文件夹在我的后端项目文件夹。然而,我的项目不是这样设置的,我不想改变它(如果可能的话)。我原以为可以通过url引用api,但我注意到spring security在登录成功时不发送http200响应,而是发送http302重定向响应。我见过禁用表单登录然后使用jwt进行身份验证的解决方案,但是我也看到这不是一个好的做法,因为没有办法撤销这个令牌。
下面是我的应用程序安全配置的外观

@Configuration
@EnableWebSecurity
public class ApplicationSecurityConfig extends WebSecurityConfigurerAdapter {

private final PasswordEncoder passwordEncoder;
private final ApplicationUserService applicationUserService;

@Autowired
public ApplicationSecurityConfig(PasswordEncoder passwordEncoder,
                                 ApplicationUserService applicationUserService) {
    this.passwordEncoder = passwordEncoder;
    this.applicationUserService = applicationUserService;
}

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
            .csrf().disable()
            .authorizeRequests()
            .antMatchers("/", "/css/*", "/js/*").permitAll()
            .anyRequest()
            .authenticated()
            .and()
            .formLogin()
            .usernameParameter("email")
            .and()
            .logout()
                .logoutUrl("/logout")
                .logoutRequestMatcher(new AntPathRequestMatcher("/logout", "GET"))
                .clearAuthentication(true)
                .invalidateHttpSession(true)
                .deleteCookies("JSESSIONID", "remember-me")
                .logoutSuccessUrl("/login");
}

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

}
那么,有没有办法创建一个外部登录页面并使用spring安全认证和授权特性呢?

oyjwcjzk

oyjwcjzk1#

您已经配置了springmvc身份验证,它是针对单片应用java+一些模板引擎,比如thymeleaf(不是vue),它使用重定向。vue js用于spa应用程序,它与spring mvc没有任何关系。
最简单的方法是jwt身份验证机制。只要试试谷歌的‘springjwt’、‘vue jwt’,就有足够的例子了。

hm2xizp9

hm2xizp92#

对于这个问题有很多解决方案,这主要取决于您的需求是什么以及您是如何构建应用程序的,下面是我想到的几个场景:

rest api+vuejs+jwt

如果整个前端都是用vuejs构建的,那么后端可能只包含一个发送和接收json的restapi,在这种情况下,无状态身份验证机制更有效,比如jsonwebtoken(jwt)。
在这个场景中,服务器公开了一个端点,比如/auth/login,在这个端点上您可以发送用户名和密码,服务器将用令牌进行应答。一旦vue前端拥有一个有效的令牌,它就必须将其作为每个后续api调用的请求头的一部分发送给正在进行身份验证的用户,这将确保该用户是声称拥有访问api权限的用户。
jwt的工作方式是因为它由三部分组成:
包含有关用于对令牌签名的算法的信息的头。
包含有关已登录用户的信息(用户名、角色、令牌过期日期、自定义字段等)的主体。
一种签名,由头、正文和只有服务器知道的密钥的散列组成。
通过这些信息,服务器可以验证用户是否拥有有效的令牌(它是服务器在成功登录后生成的,并且没有过期),而无需会话。
有关jwt的更多信息,请查看https://jwt.io/ rfc7519,如果你需要一个好的java实现,我以前用过auth0的实现,效果很好。

混合服务器端模板+vuejs+cookie

在某些情况下,当前端的一部分由服务器中的某个模板引擎生成,而另一部分由客户端的vuejs管理时,您将拥有一个混合应用程序,而且您可能已经有了基于会话的身份验证。如果是这种情况,您仍然可以集成身份验证,请记住,最后服务器只向客户端发送一个存储在服务器上的会话id为cookie的cookie,因此,如果您将cookie与每个请求一起发回,则服务器会将用户识别为已验证的,并允许调用api。
本例中的问题是,您正在从不同的域发出请求,因此cookie不会被传播,您可以从vue端配置webpack,在projectserver/src/main/resources/static下构建项目,并从spring提供页面服务,这样前端和后端就在同一个域下,cookie应该与ajax请求一起发送。

相关问题