springboot 2.3.2如何从后台以请求至vue前端页面

最新推荐文章于 2025-01-14 16:42:13 发布

原创最新推荐文章于 2025-01-14 16:42:13 发布 · 7.3k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue #javascript #spring boot

微服务专栏收录该内容

75 篇文章

订阅专栏

本文介绍了在微信社交登录场景下，如何使用SpringBoot 2.3.2后端主动向Vue前端发送数据请求。后端通过关键的redirect实现，前端接收回调并触发登录操作。详细代码示例可在MateCloud和Artemis开源项目中查看。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求背景

微信社交登录，获取回调信息后，希望再触发vue前端发起登录操作，故需要改变传统的vue从后台获取数据的模式，而是由后台向vue前端发起数据请求。

解决方案

JAVA后端代码

    @RequestMapping("/auth/callback/{oauthType}")
    public void login(@PathVariable String oauthType, AuthCallback callback, HttpServletResponse httpServletResponse) throws IOException {
String url = "http://localhost:9528/#/socialcallback?code="+oauthType+"-"+callback.getCode()+"&state="+callback.getState();
        log.error("url:{}", url);
        //跳转到指定页面
        httpServletResponse.sendRedirect(url);
    }

关键代码就是最后一行的redirect部分。

Vue前端代码

export default {
  name: "SocialCallback",
  created() {
    const url = window.location.href.replace("#/socialcallback", "");
    const code = getQueryString(url, "code");
    let state = getQueryString(url, "state");
    alert(code);

    const type = code.split("-")[0];
    // state = state.split("-")[0];
    alert(state);
    // 登录请求
    if (type === "github") {
      window.opener.location.href =
        `${window.location.origin}/#/login?state=${state}&code=${code}&time=` +
        new Date().getTime();
      window.close();
    } else {

    }
  },
};