SpringBoot+vue做请求头中加token,,从后端到前端,到所有的工具类已经请求拦截器和响应拦截器的配置,但获取验证码的接口和登录接口不需要带请求头请给写个详细完整的例子
时间: 2024-04-02 12:33:55 浏览: 131
【JavaScript源代码】vue+springboot实现登录验证码.docx
好的,我来给你提供一个简单的例子,实现SpringBoot+Vue前后端分离项目中请求头中加token。假设我们的项目中需要获取验证码和登录的接口不需要携带token,其他接口需要携带token。
1. 后端实现
1.1 在SpringBoot项目中配置拦截器
我们可以在SpringBoot项目中通过配置拦截器来实现对需要携带token的接口进行拦截,检查是否携带了token。在不需要携带token的接口上,我们可以通过配置excludePathPatterns来排除拦截。
```java
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Autowired
private TokenInterceptor tokenInterceptor;
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(tokenInterceptor)
.addPathPatterns("/**")
.excludePathPatterns("/login", "/captcha");
}
}
```
1.2 实现拦截器检查token
在拦截器TokenInterceptor中,我们可以实现对token的检查。如果token不存在或者无效,可以返回相应的错误信息。
```java
@Component
public class TokenInterceptor implements HandlerInterceptor {
@Autowired
private JwtTokenUtil jwtTokenUtil;
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
String token = request.getHeader("Authorization");
if (token != null) {
// 判断token是否有效
boolean isValidToken = jwtTokenUtil.validateToken(token);
if (isValidToken) {
// token有效,放行
return true;
}
}
// token不存在或者无效,返回错误信息
response.setContentType("application/json;charset=UTF-8");
response.getWriter().print(JSON.toJSONString(ResultUtil.error(ResultEnum.UNAUTHORIZED.getCode(), ResultEnum.UNAUTHORIZED.getMessage())));
return false;
}
}
```
2. 前端实现
2.1 在Vue项目中配置axios拦截器
我们可以在Vue项目中通过配置axios拦截器来实现对需要携带token的请求添加token。在不需要携带token的请求上,我们可以通过配置headers来不携带token。
```javascript
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 如果请求的url不是登录和获取验证码接口,添加token
if (config.url !== '/login' && config.url !== '/captcha') {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = token
}
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
return response.data
},
error => {
return Promise.reject(error)
}
)
export default service
```
2.2 在需要登录的组件中不携带token
在需要登录的组件中(如登录页面组件),我们可以通过配置headers来不携带token。
```javascript
import axios from '@/utils/request'
export function login(data) {
return axios({
url: '/login',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data
})
}
```
2.3 在需要携带token的组件中添加token
在需要携带token的组件中(如用户信息页面组件),我们可以在请求头中添加token。
```javascript
import axios from '@/utils/request'
export function getUserInfo() {
return axios({
url: '/user/info',
method: 'get'
})
}
```
以上就是一个简单的例子,实现了从后端到前端,到所有的工具类已经请求拦截器和响应拦截器的配置,但获取验证码的接口和登录接口不需要带请求头的功能。
阅读全文