以下是使用
Spring Boot和Vue.js实现用户登录的基本步骤：
1. 创建
Spring Boot项目
使用
Spring Initializr创建一个新的
Spring Boot项目，添加
Spring Web和
Spring Security依赖项。
2. 配置
Spring Security
在
Spring Security配置类中，配置用户身份验证和授权。可以使用内存身份验证或数据库身份验证。
3. 创建Vue.js
项目
使用Vue CLI创建一个新的Vue.js
项目。在Vue.js
项目中，使用Vue Router和Axios库来处理路由和HTTP请求。
4. 创建登录页面
在Vue.js
项目中，创建一个登录页面。该页面应该包含一个表单，用户可以输入用户名和密码。
5. 处理登录请求
在Vue.js
项目中，创建一个登录服务，该服务将用户名和密码发送到后端进行身份验证。如果身份验证成功，则将用户重定向到主页。
6. 创建主页
在Vue.js
项目中，创建一个主页，该主页应该包含用户信息和注销按钮。
7. 处理注销请求
在Vue.js
项目中，创建一个注销服务，该服务将用户注销并将其重定向到登录页面。
下面是一个简单的示例代码，用于演示如何使用
Spring Boot和Vue.js实现用户登录：
```java
//
Spring Security配置类
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
private UserDetailsService userDetailsService;
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/api/login").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginProcessingUrl("/api/login")
.successHandler(authenticationSuccessHandler())
.failureHandler(authenticationFailureHandler())
.and()
.logout()
.logoutUrl("/api/logout")
.logoutSuccessHandler(logoutSuccessHandler())
.and()
.csrf().disable();
}
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(userDetailsService);
}
@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();
}
}
// 自定义身份验证成功处理程序
public class CustomAuthenticationSuccessHandler implements AuthenticationSuccessHandler {
@Override
public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response,
Authentication authentication) throws IOException, ServletException {
response.setStatus(HttpStatus.OK.value());
}
}
// 自定义身份验证失败处理程序
public class CustomAuthenticationFailureHandler implements AuthenticationFailureHandler {
@Override
public void onAuthenticationFailure(HttpServletRequest request, HttpServletResponse response,
AuthenticationException exception) throws IOException, ServletException {
response.setStatus(HttpStatus.UNAUTHORIZED.value());
}
}
// 自定义注销成功处理程序
public class CustomLogoutSuccessHandler implements LogoutSuccessHandler {
@Override
public void onLogoutSuccess(HttpServletRequest request, HttpServletResponse response,
Authentication authentication) throws IOException, ServletException {
response.setStatus(HttpStatus.OK.value());
}
}
// 用户服务实现类
@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(),
Collections.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);
}
// Vue.js登录服务
export default {
login(username, password) {
return axios.post('/api/login', {username, password});
}
}
// Vue.js登录页面
<template>
<div>
<h1>Login</h1>
<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>
import loginService from './loginService';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
login() {
loginService.login(this.username, this.password)
.then(() => {
this.$router.push('/');
})
.catch(() => {
alert('Login failed');
});
}
}
};
</script>
// Vue.js主页
<template>
<div>
<h1>Home</h1>
<p>Welcome, {{ username }}!</p>
<button @click="logout">Logout</button>
</div>
</template>
<script>
import logoutService from './logoutService';
export default {
data() {
return {
username: ''
};
},
created() {
this.username = localStorage.getItem('username');
},
methods: {
logout() {
logoutService.logout()
.then(() => {
localStorage.removeItem('username');
this.$router.push('/login');
})
.catch(() => {
alert('Logout failed');
});
}
}
};
</script>
```
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
