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去了。