Vue + SpringBoot 简单实现Oauth2.0登录

Vue + SpringBoot 简单实现Oauth2.0登录

问题

网上的教程都是前后端放一起，对于完全前后端分离的项目来说，前后端都是独立的服务，存在跨域，前端如果不主动请求后端，那么后端拿到的oauth信息是无法给到前端了

解决方案

回调的时候返回到Vue的一个页面，通过这个页面返回给后端处理，后端处理第三方登录之后通知前端，前端决定跳回登录页面还是主页，我们使用Gitee来演示

登录验证页

<template>
    <div class="box" v-loading="loading" element-loading-text="登录验证中">
    </div>
</template>

<script>
    export default {
    name: 'LoginValidate',
    data() {
        return {
            loading: true
        }
    },
    methods: {
        validate(code) {
            this.axios.get('http://localhost:8081/validate/' + code).then(resp => {
                if (resp.data.status == 200) {
                	// 登录成功，前往主页
                } else {
                	// 登录失败，返回登录页
                }
            })
        }
    },
    created() {
        this.validate(this.$route.query.code)
    }
  }
</script>

<style>
.box {
    position : absolute;
	width : 100%;
	height : 100%;
}
</style>

后端

@RestController
@CrossOrigin
public class OauthController {
	@Autowired
	UserService userService
	
    @GetMapping("/validate/{code}")
    public Map<String, Object> validate(@PathVariable(value = "code") String code) {
    	UserInfo info = userService.getInfo(code);
        Map<String, Object> result = new HashMap<>();
        result.put("status", 200);
        result.put("message", "登录成功");
        result.put("data", info);
        return result;
    }
}

测试登录

登录成功，跳到回调页面，添加一个等待动画，防止用户做多余操作

后端也拿到数据

一个简单的前后端分离第三方登录就写好啦