电商网站设计公司皆选亿企邦/谷歌关键词分析工具

随着前端框架的不断发展，越来越多的项目更喜欢用前段后分离来做，作为后台人员，完全不想写一点前端，只想关注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;}@Beanpublic 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