springboot+vue实现登录功能
时间: 2023-07-27 14:07:15 浏览: 73
实现Spring Boot和Vue.js的登录功能需要进行以下步骤:
1. 在Spring Boot中创建一个简单的REST API,用于验证用户的登录凭据并生成访问令牌。
2. 在Vue.js中创建一个登录页面,该页面包含用户名和密码的输入框,以及一个登录按钮。当用户单击登录按钮时,Vue.js将向上述REST API发送一个POST请求,以验证用户的登录凭据。
3. 如果用户的登录凭据有效,则REST API将生成一个访问令牌,并将其返回给Vue.js。Vue.js将该令牌存储在本地存储中,并将其用于后续请求的身份验证。
4. 如果用户的登录凭据无效,则REST API将返回一个错误响应,并在登录页面上显示错误消息。
下面是一个简单的示例代码:
Spring Boot REST API:
```java
@RestController
public class AuthController {
@Autowired
private AuthenticationManager authenticationManager;
@Autowired
private JwtUtil jwtUtil;
@PostMapping("/authenticate")
public ResponseEntity<?> authenticate(@RequestBody AuthRequest authRequest) throws Exception {
try {
authenticationManager.authenticate(
new UsernamePasswordAuthenticationToken(authRequest.getUsername(), authRequest.getPassword())
);
} catch (BadCredentialsException e) {
throw new Exception("Incorrect username or password", e);
}
final UserDetails userDetails = userDetailsService
.loadUserByUsername(authRequest.getUsername());
final String token = jwtUtil.generateToken(userDetails);
return ResponseEntity.ok(new AuthResponse(token));
}
}
```
Vue.js登录页面:
```html
<template>
<div>
<h1>Login</h1>
<div v-if="error" style="color: red">{{ error }}</div>
<div>
<input type="text" v-model="username" placeholder="Username">
</div>
<div>
<input type="password" v-model="password" placeholder="Password">
</div>
<div>
<button @click="login">Login</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: '',
error: ''
};
},
methods: {
login() {
axios.post('/api/authenticate', {
username: this.username,
password: this.password
})
.then(response => {
localStorage.setItem('token', response.data.token);
this.$router.push('/');
})
.catch(error => {
this.error = error.response.data.message;
});
}
}
};
</script>
```
请注意,这只是一个简单的示例代码,并且缺少一些必要的组件,例如身份验证拦截器。