vue2.0 前后端分离跨域每次请求sessionId不一致解决 springboot解决跨域问题
随着前端框架的不断发展,越来越多的项目更喜欢用前段后分离来做,作为后台人员,完全不想写一点前端,只想关注API的编写就够了 哈哈但前后端分离开发项目还是会踩到太多坑,最近就有一个需求是,多个站点共享用户登录信息,就是当用户在某一个站点登录了,当点击到另一个项目的站点时,延用之前的登录信息,无需再次登录。 此时就想到了 使用Redis来实现该需求,当用户登录成功后,将用户信息保存到Redis,以..
·
随着前端框架的不断发展,越来越多的项目更喜欢用前段后分离来做,作为后台人员,完全不想写一点前端,只想关注API的编写就够了 哈哈
但前后端分离开发项目还是会踩到太多坑,最近就有一个需求是,多个站点共享用户登录信息,就是当用户在某一个站点登录了,当点击到另一个项目的站点时,延用之前的登录信息,无需再次登录。 此时就想到了 使用Redis来实现该需求,当用户登录成功后,将用户信息保存到Redis,以sessionId为key json格式的用户信息为value。
这样做 那就有一个要求,那就是必须保持每次请求的sessionId必须一致。
前端使用的是vue2.0 后台使用的是java springboot
- 首先我们解决跨域问题
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.setAllowCredentials(true);
return corsConfiguration;
}
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig());
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
return bean;
}
}
- 然后写好controller代码
@RequestMapping(value = "index1")
public String index1(String num) {
RespInfo respInfo = new RespInfo();
respInfo.setCode(20);
Map<String,String> map = new HashMap<String, String>();
map.put("num",num);
map.put("path",request.getRequestURI());
map.put("sessionid",session.getId());
respInfo.setData(map);
System.out.println(JSON.toJSONString(map));
return JSON.toJSONString(respInfo);
}
/**
* 请求接口2
* @param num
* @return
*/
@RequestMapping(value = "index2")
public String index2(String num){
RespInfo respInfo = new RespInfo();
respInfo.setCode(20);
Map<String,String> map = new HashMap<String, String>();
map.put("num",num);
map.put("path",request.getRequestURI());
map.put("sessionid",session.getId());
respInfo.setData(map);
System.out.println(JSON.toJSONString(map));
return JSON.toJSONString(respInfo);
}
/**
* 请求接口3
* @param num
* @return
*/
@RequestMapping(value = "index3")
public String index3(String num){
RespInfo respInfo = new RespInfo();
respInfo.setCode(20);
Map<String,String> map = new HashMap<String, String>();
map.put("num",num);
map.put("path",request.getRequestURI());
map.put("sessionid",session.getId());
respInfo.setData(map);
System.out.println(JSON.toJSONString(map));
return JSON.toJSONString(respInfo);
}
关键 在main.js下面加上这句代码
axios.defaults.withCredentials = true
- 我们看前端页面的代码
<template>
<div>
<h2>前后端分离SessionId共享(Java + Vue)</h2>
<Card>
<div v-for="obj in sessionids">
<span>第{{ obj.num}}次访问</span>
<span style="color: red">{{ obj.path }}</span>
<span>SessionId:<b>{{ obj.sessionid }}</b></span>
</div>
</Card>
</div>
</template>
<script>
import http from './http'
export default {
data () {
return {
sessionids: []
}
},
created() {
this.getSessionId(1)
},
methods: {
getSessionId: function (number) {
let timer = setInterval(() => {
http.get('index1',{num: number}).then((res)=> {
if (res) {
console.log(res.data)
this.sessionids.push(res.data)
}
})
http.get('index2',{num: number}).then((res)=> {
if (res) {
console.log(res.data)
this.sessionids.push(res.data)
}
})
http.get('index3',{num: number}).then((res)=> {
if (res) {
console.log(res.data)
this.sessionids.push(res.data)
}
})
if (number >= 5) {
clearInterval(timer)
}
number++
},2000);
}
}
}
</script>
源代码地址:https://github.com/niezhiliang/multy-domain-user-identifying
更多推荐
已为社区贡献5条内容
所有评论(0)