uniapp基于springsecurity得密码模式登录的完整代码
时间: 2023-08-09 17:09:37 浏览: 102
uniapp 基于 Spring Security 实现密码模式登录的完整代码如下:
1. 后端代码
首先需要在后端实现一个登录接口,用于接收前端传递过来的用户名和密码,并返回相应的登录结果。这里使用 Spring Security 实现密码模式登录,需要在 SecurityConfig 中进行相关配置。
```
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
private UserService userService;
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(userService).passwordEncoder(passwordEncoder());
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/login").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginProcessingUrl("/login")
.usernameParameter("username")
.passwordParameter("password")
.successHandler(authenticationSuccessHandler())
.failureHandler(authenticationFailureHandler())
.permitAll()
.and()
.logout()
.logoutUrl("/logout")
.logoutSuccessHandler(logoutSuccessHandler())
.permitAll()
.and()
.csrf().disable();
}
@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
@Bean
public AuthenticationSuccessHandler authenticationSuccessHandler() {
return new CustomAuthenticationSuccessHandler();
}
@Bean
public AuthenticationFailureHandler authenticationFailureHandler() {
return new CustomAuthenticationFailureHandler();
}
@Bean
public LogoutSuccessHandler logoutSuccessHandler() {
return new CustomLogoutSuccessHandler();
}
}
```
2. 前端代码
在前端代码中,需要实现一个登录页面,用于接收用户输入的用户名和密码,并将其发送到后端进行验证。以下是一个简单的登录页面示例:
```
<template>
<view class="container">
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<button @click="login">登录</button>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
uni.request({
url: '/login',
method: 'POST',
data: {
username: this.username,
password: this.password
},
success: function(res) {
uni.showToast({
title: '登录成功',
icon: 'success'
})
},
fail: function(res) {
uni.showToast({
title: '登录失败,请重试',
icon: 'none'
})
}
})
}
}
}
</script>
```
在登录按钮的点击事件中,使用 uni.request 方法向后端发送 POST 请求,将用户名和密码作为请求体发送到后端进行验证。如果验证成功,后端会返回一个登录成功的响应,否则返回一个登录失败的响应。
需要注意的是,在进行跨域请求时,需要在后端进行相应的配置,允许前端访问后端接口。可以使用 @CrossOrigin 注解或者在 WebMvcConfigurer 中进行配置。
以上就是 uniapp 基于 Spring Security 实现密码模式登录的完整代码,其中包括了后端的 SecurityConfig 配置和前端的登录页面示例。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)