前后端分离,可谓到处都是坑啊,其实最主要的还是跨域问题。哎,我太难了。
我觉得这个就没啥好说的了,直接用这个教程就好:Spring Boot 快速集成第三方登录功能
呜呜呜,这里才是让人头疼的地方啊,跨域,跨域还是跨域问题。
我开始想直接通过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去了。