vue + justauth 实现前后端分离下的第三方登录

前言

前后端分离，可谓到处都是坑啊，其实最主要的还是跨域问题。哎，我太难了。

使用justauth

我觉得这个就没啥好说的了，直接用这个教程就好：Spring Boot 快速集成第三方登录功能

vue调用接口

呜呜呜，这里才是让人头疼的地方啊，跨域，跨域还是跨域问题。

我开始想直接通过axios来调用后端的登录接口的，直接一个重定向跨域让我放弃了。
然后我通过控制台找到了重定向后的地址，我就直接请求这个地址，，然后又来了一个重定向跨域，我哭了。
我又通过后端解析返回了这个重定向后的请求地址，再次发起请求，好吧，这次没有重定向了，但是直接跨域。
虽然看到网上有一种解决调用第三方接口跨域问题的方案，但我试了试，好像完全不起作用，而且那个方法也有局限性。

下面开始今天的主题，如何实现它。

我是直接在vue通过location.href来跳转到后端api地址，直接通过浏览器来请求接口。
因为项目是前后端分离的，如果是MVC模式的就不存在问题了。所以后端这个时候如何传数据到前端是个问题。
这里在vue中增加了一个第三方登录中转页面来接收后端传来的数据，并跳转页面。
后端则是通过重定向来跳转到前端的中转页面，并携带数据（token等）。
下面来看看代码

1、vue页面（具体的根据自己需求来）

<template>
  <div>div>
template>
<script>
import {
  RECORD_TOKEN,
  SAVE_HEAD_IMG,
  SAVE_UID,
  SAVE_ACCOUNT
} from '@/store/mutation-types'
export default {
  data () {
    return {
      res: this.$route.query.result
    }
  },
  mounted () {
    // 这是element-ui中的组件
    const loading = this.$loading({
      lock: true,
      text: '登陆中',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    this.saveInfo()
    loading.close()
  },
  methods: {
    saveInfo () {
      let info = JSON.parse(this.res)
      // 跳转到登录前的页面或主页
      this.$router.push('/')
      // 记录用户账号
      this.$store.commit(SAVE_ACCOUNT, info.username)
      // 记录token
      this.$store.commit(RECORD_TOKEN, info.token)
      // 将uid记录到state
      this.$store.commit(SAVE_UID, info.uid)
      // 将头像路径记录到state
      this.$store.commit(SAVE_HEAD_IMG, info.avatar)
    }
  }
}
script>
<style scoped>
style>

controller代码：

     /**
     * 登录成功后的回调
     *
     * @param oauthType 第三方登录类型
     * @param callback  携带返回的信息
     */
    @GetMapping("/{oauthType}/callback")
    public void login(@PathVariable String oauthType, AuthCallback callback, 
    HttpServletResponse response1) throws IOException {
        AuthRequest authRequest = factory.get(getAuthSource(oauthType));
        // 登录
        AuthResponse response = authRequest.login(callback);
        // 将响应的数据格式化为字符串json
        String result = JSONUtil.toJsonStr(response);
        // 将字符串转化为json对象
        JSONObject jsonObject = JSONObject.parseObject(result);
        // 获取json对象中的data对象
        JSONObject data = jsonObject.getJSONObject("data");
        int uid = Integer.parseInt(data.getString("uuid"));
        // 传给前端的数据
        JSONObject res = new JSONObject();
        res.put("username",data.getString("username"));
        res.put("avatar",data.getString("avatar"));
        res.put("uid",uid);
        // 取出token
        String token = data.getJSONObject("token").getString("accessToken");
        res.put("token",token);
        // 设置token的过期时间
        valueOperations.set(token,token,7, TimeUnit.HOURS);
        // 重定向到前端的第三方登录中转页面
        response1.sendRedirect("http://jie12366.xyz:8081/#/oauth?result=" + res);
    }

大概思路就这样了，呜呜呜，继续改bug去了。