vue.js - 单页应用，如何做第三方登录？

问题描述

问 题

前端依靠vue.js+vue-router将前台页面做成单页应用，后端laravel仅提供接口。

---

后端第三方登录api以github为例：
跳转api：domain/api/oauth/github
回调api：domain/api/oauth/github/callback

---

我现在遇到的情况是：

• 登录页面有个第三方登录的按钮，链接到 domain/api/oauth/github，跳转到github的授权页面。
• 授权成功后回调到 domain/api/oauth/github/callback，然后储存用户数据，生成access_token，我现在的问题就是前端如何获取该access_token？

解决方案

我是这样做的：
我是写了一个处理后端返回的页面key
后端处理完之后，把access_token放在url的query中并跳转到key页面：

//key.vue
<template>
</template>

<script>
    export default {
        name: 'key',
        beforeCreate() {
            ...
            window.localStorage.access_token = this.$route.query.key
            this.$router.replace({
                name:'home'
            })
            ...
       }
    }
</script>

<style>

这篇关于vue.js - 单页应用，如何做第三方登录？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！