SpringBoot+vue做请求头中加token,,从后端到前端,到所有的工具类已经请求拦截器和响应拦截器的配置请给写个详细完整的例子
时间: 2024-04-02 21:34:29 浏览: 59
好的,以下是一个基于 SpringBoot + Vue 的请求头中加 token 的示例。
首先,在后端 SpringBoot 中,需要配置拦截器来验证 token。创建一个名为 TokenInterceptor 的拦截器类,并在其中实现 preHandle 方法:
```java
@Component
public class TokenInterceptor implements HandlerInterceptor {
@Autowired
private JwtUtil jwtUtil;
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
String token = request.getHeader("Authorization");
if (token != null && token.startsWith("Bearer ")) {
token = token.substring(7);
if (jwtUtil.validateToken(token)) {
return true;
} else {
throw new RuntimeException("Token验证失败");
}
} else {
throw new RuntimeException("缺少Authorization头信息");
}
}
}
```
其中,JwtUtil 是用来生成和验证 JWT token 的工具类。在 SpringBoot 的配置类中,需要将 TokenInterceptor 注册为拦截器:
```java
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Autowired
private TokenInterceptor tokenInterceptor;
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(tokenInterceptor).addPathPatterns("/**").excludePathPatterns("/login");
}
}
```
在上面的代码中,我们将 TokenInterceptor 注册为拦截器,并且添加了一个 excludePathPatterns 方法,用来排除登录接口。
接下来,在前端 Vue 中,需要将 token 添加到请求头中。可以在 axios 的请求拦截器中添加一个 Authorization 头:
```javascript
import axios from 'axios'
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
error => {
return Promise.reject(error)
}
)
```
在上面的代码中,我们使用 axios 的 interceptors 对象,添加了一个请求拦截器。在拦截器中,我们先从 localStorage 中获取 token,然后将其添加到请求头的 Authorization 字段中。
最后,如果使用了工具类来发送请求,也需要在工具类中添加 token:
```javascript
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8080/api',
timeout: 5000
})
export function login (data) {
return request({
url: '/login',
method: 'post',
data
})
}
export function getUserInfo () {
return request({
url: '/userInfo',
method: 'get'
})
}
```
在上面的代码中,我们使用 axios 创建了一个名为 request 的对象。在发送请求时,我们直接调用 request 对象的方法,并且不需要手动添加 token。
这样就完成了请求头中加 token 的配置。需要注意的是,在每次登录时,后端需要返回一个 token 给前端,并且前端需要将其保存到 localStorage 中,以便后续使用。