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