前端處理：
- 在request.js中添加如下代碼鹿蜀，允許跨域攜帶cookie
import axios from 'axios'
axios.defaults.withCredentials = true // 添加代碼：允許跨域攜帶cookie
- 請求攔截添加token
service.interceptors.request.use(
config => {
if (store.getters.token) {
//添加token到Header的Authorization中
config.headers['Authorization'] = 'Bearer ' + getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
后端處理：
- 添加SessionInterceptor攔截器，來控制登錄的邏輯判斷
@Component
public class SessionInterceptor extends HandlerInterceptorAdapter {
/**
* @param request 請求對象
* @param response 響應(yīng)對象
* @param handler 前置對象
* @return 返回false=攔截 返回true=繼續(xù)執(zhí)行請求
* @throws Exception
*/
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
if ("OPTIONS".equals(request.getMethod())) {
return true;
}
// session expire
if (request.getSession(false) == null || request.getHeader("Authorization") == null) {
response.sendError(HttpStatus.UNAUTHORIZED.value(), "登錄超時，請重新登錄");
return false;
}
// validate token in session
else if (request.getSession().getAttribute("token") != null) {
String token = request.getHeader("Authorization");
if (token.equals("Bearer " + request.getSession().getAttribute("token").toString())) {
return true;
} else {
response.sendError(HttpStatus.UNAUTHORIZED.value(), "登錄令牌無效霸株，請重新登錄");
return false;
}
}
// invalid session
else {
response.sendError(HttpStatus.UNAUTHORIZED.value(), "登錄會話異常雕沉，請重新登錄");
return false;
}
}
}
- 將攔截器注入到配置去件，并添加跨域處理
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
/**
* SessionInterceptor 處理登錄邏輯判斷
*/
@Override
public void addInterceptors(InterceptorRegistry registry) {
//白名單地址 注意：不要添加server.servlet.servcontext-path:的目錄
List<String> excludeUrl = Arrays.asList("/user/login", "/error",
"/webjars/**", "/swagger-resources/**", "/swagger-ui.html");
registry.addInterceptor(new SessionInterceptor())
// 這里用/**表示攔截所有請求
.addPathPatterns("/**")
// 排除白名單地址
.excludePathPatterns(excludeUrl);
}
/**
* 前后端跨域，解決session為空
*
* @return
*/
@Bean
public WebMvcConfigurer webMvcConfigurer2() {
return new WebMvcConfigurer() {
/**
* 設(shè)置頭 使可以跨域訪問
* @param registry
* @since 4.2
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.maxAge(3600)
.allowCredentials(true);
}
};
}
}
- 在登錄成功時設(shè)置session中的token并下發(fā)
@Autowired
private HttpSession session;
/**
* 登錄
*/
public LoginVO login(LoginDTO dto) {
User user = baseMapper.login(dto.getUsername());
LoginVO loginVO = Optional.ofNullable(user).map(x -> {
String slatPassword = SecureUtil.md5(dto.getPassword() + x.getSlat());
if (!x.getPassword().equals(slatPassword)) {
throw new AppException("用戶名或密碼錯誤");
}
LoginVO u = LoginVO.builder().build();
BeanUtils.copyProperties(user, u);
u.setRole(x.getRoleId().equals(1) ? "管理員" : "審計員");
return u;
}).orElseThrow(resolver("用戶名或密碼錯誤"));
String token = UUID.randomUUID().toString();
session.setAttribute("token", token);
loginVO.setToken(token);
return loginVO;
}
/*
* api接口返回
*/
@ApiOperation(value = "用戶-登錄")
@PostMapping(value = "/login")
@UserLog(module = SystemLogModuleEnum.USER, type = "登錄")
public R login(@RequestBody @Valid LoginDTO loginDTO) {
LoginVO loginVO = userService.login(loginDTO);
return R.ok(loginVO);
}
使用 vue + springboot 前后端分離 跨域尤溜、cookie肠牲、session 問題靴跛，全套配置一篇就夠了
前后端分離 vue+springboot 跨域 session+cookie失效問題
