springboot+vue怎么实现登录模块
时间: 2024-02-01 18:01:59 浏览: 27
实现登录模块需要前后端配合完成,以下是一个简单的示例:
1. 后端使用Spring Boot实现:
首先,需要引入Spring Security依赖,可以在pom.xml文件中添加以下依赖:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
```
接着,在Spring Boot的配置类中添加以下配置:
```java
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
private UserDetailsService userDetailsService;
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/login").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.defaultSuccessUrl("/home")
.permitAll()
.and()
.logout()
.logoutSuccessUrl("/")
.permitAll();
}
@Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(userDetailsService);
}
@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
}
```
其中,`configure()`方法配置了哪些请求需要进行验证,以及登录、登出的相关配置。`configureGlobal()`方法配置了用户信息的获取方式,这里使用了一个自定义的`UserDetailsService`接口来获取用户信息。`passwordEncoder()`方法配置了密码加密方式,这里使用了BCrypt加密算法。
接下来,实现`UserDetailsService`接口以及相关实体类:
```java
@Service
public class UserDetailsServiceImpl implements UserDetailsService {
@Autowired
private UserRepository userRepository;
@Override
public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
User user = userRepository.findByUsername(username);
if (user == null) {
throw new UsernameNotFoundException("User not found");
}
return new org.springframework.security.core.userdetails.User(user.getUsername(), user.getPassword(), emptyList());
}
}
@Entity
@Table(name = "users")
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(nullable = false, unique = true)
private String username;
@Column(nullable = false)
private String password;
// 省略getter、setter、构造方法等
}
public interface UserRepository extends JpaRepository<User, Long> {
User findByUsername(String username);
}
```
这里使用了JPA来操作数据库,`UserDetailsService`接口使用了自定义的实现类`UserDetailsServiceImpl`,通过`UserRepository`来获取用户信息。
2. 前端使用Vue实现:
首先,在Vue项目中安装axios和vue-router依赖:
```
npm install axios vue-router --save
```
接着,可以在main.js中添加以下代码来配置axios:
```javascript
import axios from 'axios'
Vue.prototype.$http = axios
```
然后,在Vue项目中创建一个登录页面Login.vue,实现登录功能:
```html
<template>
<div>
<h2>Login</h2>
<form @submit.prevent="login">
<div>
<label>Username:</label>
<input type="text" v-model="username">
</div>
<div>
<label>Password:</label>
<input type="password" v-model="password">
</div>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
this.$http.post('/login', {
username: this.username,
password: this.password
}).then(response => {
// 登录成功后跳转到主页
this.$router.push('/home')
}).catch(error => {
console.log(error)
})
}
}
}
</script>
```
在上面的代码中,使用了axios来发送POST请求,将用户名和密码发送到后端进行验证,如果验证成功则跳转到主页。
以上是一个简单的示例,实际项目中还需要进行一些安全性、效率性的优化,例如加入验证码、防止暴力破解等。