### Spring Boot 和 Vue 实现前后端分离的登录功能
#### 后端 (Spring Boot)
在后端部分，可以通过创建一个简单的 REST API 来处理用户的登录请求。
1
. **配置依赖项**
需要在 `pom
.xml` 文件中添加必要的依赖项来支持 Web
开发和安全认证。
```xml
<dependencies>
<!-- Spring Boot Starter Web -->
<dependency>
<groupId>org
.springframework
.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Spring Security -->
<dependency>
<groupId>org
.springframework
.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<!-- JSON Web Token Support -->
<dependency>
<groupId>io
.jsonwebtoken</groupId>
<artifactId>jjwt-api</artifactId>
<version>0
.11
.5</version>
</dependency>
<dependency>
<groupId>io
.jsonwebtoken</groupId>
<artifactId>jjwt-impl</artifactId>
<version>0
.11
.5</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>io
.jsonwebtoken</groupId>
<artifactId>jjwt-jackson</artifactId>
<version>0
.11
.5</version>
<scope>runtime</scope>
</dependency>
</dependencies>
```
2
. **创建控制器**
创建一个用于处理登录逻辑的控制器类：
```
java
@RestController
public class AuthController {
priv
ate final UserService userService;
public AuthController(UserService userService) {
this
.userService = userService;
}
@PostMapping("/login")
public ResponseEntity<?> authentic
ateUser(@RequestBody LoginRequest loginRequest) {
Authentic
ation authentic
ation = null;
try {
authentic
ation = new UsernamePasswordAuthentic
ationToken(
loginRequest
.getUsername(),
loginRequest
.getPassword()
);
SecurityContextHolder
.getContext()
.setAuthentic
ation(authentic
ation);
} c
atch (Exception e) {
return ResponseEntity
.st
atus(HttpSt
atus
.UNAUTHORIZED)
.body("
Invalid credentials");
}
String token = JwtUtils
.gener
ateJwtToken(authentic
ation);
return ResponseEntity
.ok(new JwtResponse(token));
}
}
```
3
. **JWT 工具类**
使用 JWT（JSON Web Tokens）作为身份验证机制的一部分。可以编写工具类来自动生成令牌并解析它。
```
java
import io
.jsonwebtoken
.*;
import org
.slf4j
.Logger;
import org
.slf4j
.LoggerFactory;
import org
.springframework
.security
.core
.Authentic
ation;
import org
.springframework
.stereotype
.Component;
import
java.util
.D
ate;
@Component
public class JwtUtils {
priv
ate st
atic final Logger logger = LoggerFactory
.getLogger(JwtUtils
.class);
priv
ate
String jwtSecret = "your_jwt_secret";
priv
ate int jwtExpir
ationMs = 86400000; // One day
.
public
String gener
ateJwtToken(Authentic
ation authentic
ation) {
UserDetailsImpl userPrincipal = (UserDetailsImpl) authentic
ation
.getPrincipal();
return Jwts
.builder()
.setSubject((userPrincipal
.getUsername()))
.setIssued
At(new D
ate())
.setExpir
ation(new D
ate((new D
ate())
.getTime() + jwtExpir
ationMs))
.signWith(Sign
atureAlgorithm
.HS512, jwtSecret)
.compact();
}
public boolean valid
ateJwtToken(
String authToken) {
try {
Jwts
.parser()
.setSigningKey(jwtSecret)
.parseClaimsJws(authToken);
return true;
} c
atch (Sign
atureException e) {
logger
.error("
Invalid JWT sign
ature
: {}", e
.getMessage());
} c
atch (MalformedJwtException e) {
logger
.error("
Invalid JWT token
: {}", e
.getMessage());
} c
atch (ExpiredJwtException e) {
logger
.error("JWT token is expired
: {}", e
.getMessage());
} c
atch (UnsupportedJwtException e) {
logger
.error("JWT token is unsupported
: {}", e
.getMessage());
} c
atch (IllegalArgumentException e) {
logger
.error("JWT claims
string is empty
: {}", e
.getMessage());
}
return false;
}
}
```
---
#### 前端 (Vue
.js)
前端部分主要负责发送登录请求并将返回的 JWT 存储到本地存储中以便后续使用。
1
. **安装 Axios**
安装 Axios 库以方便发起 HTTP 请求。
```bash
npm install axios
```
2
. **修改 main
.ts 文件**
如果需要全局引入 Ant Design Vue 组件库，则可以在 `main
.ts` 中完成如下设置：
```typescript
import { cre
ateApp } from 'vue';
import App from '
./App
.vue';
// 引入 ant-design-vue
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd
.css';
const app = cre
ateApp(App);
app
.use(Antd);
app
.mount('#app');
```
3
. **创建登录页面**
编写一个简单的登录表单组件，并通过 Axios 发送 POST 请求至后端接口 `/login`。
```html
<templ
ate>
<a-form
:model="formSt
ate" name="normal_login"
layout="vertical">
<h1>Login Page</h1>
<a-form-item label="Username">
<a-input v-model
:value="formSt
ate
.username"/>
</a-form-item>
<a-form-item label="Password">
<a-input-password v-model
:value="formSt
ate
.password"/>
</a-form-item>
<a-button type="primary" block @click="handleSubmit">Login</a-button>
</a-form>
</templ
ate>
<script
lang="ts">
import { defineComponent, reactive } from 'vue';
import axios from 'axios';
export default defineComponent({
setup() {
const formSt
ate = reactive({
username
: '',
password
: ''
});
function handleSubmit()
: void {
axios
.post('http
://localhost
:8080/login', {
username
: formSt
ate
.username,
password
: formSt
ate
.password
})
.then(response => {
localStorage
.setItem('token', response
.d
ata
.token); // 将 token 存储到 LocalStorage
alert('Logged In Successfully!');
})
.c
atch(error => {
console
.log(error
.response
.d
ata
.message || error
.message);
alert('Error Logging In
.');
});
};
return {
formSt
ate,
handleSubmit
};
},
});
</script>
```
---
#### 总结
上述代码展示了如何利用 Spring Boot 构建后端服务以及 Vue
.js 进行前端交互[^1]。具体来说，在后端实现了基于 JWT 的用户认证流程；而在前端则构建了一个简单的登录界面并通过 Axios 调用后端 API 接口完成登录操作。
扫一扫
9570
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
