支付宝授权登录淘宝_vue的登录实现

支付宝授权登录淘宝_vue的登录实现api接口文档:https://docs.open.alipay.com/289/105656后台管理系统原本是用账号密码登录的,不过需求要改成支付宝授权,前端仅仅需要改登录页,以及添加一个授权返

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

api接口文档:https://docs.open.alipay.com/289/105656

 

后台管理系统原本是用账号密码登录的,不过需求要改成支付宝授权,

前端仅仅需要改登录页,以及添加一个授权返回页

大致流程:访问首页,因为我们有分(测试,开发)环境的,所以访问支付宝地址以及backurl是从后台获取的

因为在支付宝授权的缓存暂无办法清除,可以搞个中转页,我就不写了。

 授权页

<script>
import { getZFBINfo } from 'api/login';
export default {
data() {
return {}
},
methods: {
handleLogin() {
getZFBINfo().then((res) => {
//backUrl是授权返回页(去后台调支付宝接口获取token和user_id,然后进行用户验证和其他逻辑处理)
const backUrl = encodeURIComponent(res.backUrl)
//url是跳转到支付宝登录页面,然后他会跳转到redirect_uri
const url = res.url + '&scope=auth_base&redirect_uri='+backUrl
window.location.href = url
}).catch((res) => {
console.log('error', res)
})
}
},
creatd() {
//这里是一进页面就会加载的操作,例如执行handleLogin方法
handleLogin();
},
destroyed() {}
}
</script>

授权返回页
<script>
import { getByAuthCode } from 'api/login';//这个方法是去后台接口调支付宝接口获取userid和token,然后进行业务逻辑的处理
import { mapGetters } from 'vuex';
import {
setToken,
removeToken
} from 'utils/auth';
export default {
data() {
return {}
},
computed: {
...mapGetters([
'elements'
])
},created() {
this.getCode()
}, methods: {

getCode() {
//获取当前页面的url
let url = decodeURI(location.href)
let theRequest = new Object()
if (url.indexOf('?') !== -1) {
let str = url.substr(1);
let strs = str.split('&');
for (let i = 0; i < strs.length; i++) {
theRequest[strs[i].split('=')[0]] = decodeURIComponent(strs[i].split('=')[1]);
}
}
if (theRequest.auth_code) {
getByAuthCode(theRequest.auth_code).then((res)=>{
// 获取到token
if(res.data){
setToken(res.data);
this.$store.commit('SET_TOKEN', res.data);
//进入首页
this.$router.replace({path: '/dashboard'})
}else{
alert("用户不存在,请清除缓存重新登录");
//如果有写中转页,可以调到中转页
this.$router.push({path: `/login`})
}
}).catch((res) => {
console.log('error', res)
})
}
}
}
}
</script>





如果扫码登录跳转到这个地方

支付宝授权登录淘宝_vue的登录实现

 

 

 是没有在支付宝管理后台配置

支付宝授权登录淘宝_vue的登录实现

 

 

 

    

     

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/166681.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 安装AIC准则使用前进法后退法和逐步回归法进行变量选择的r语言代码

    安装AIC准则使用前进法后退法和逐步回归法进行变量选择的r语言代码setwd(“C:/Users/IBM/Desktop/研一课程/2.2回归分析/回归作业”) #设定当前的工作目录shuju=read.table(“shuju.txt”,header=T)shuju #读取数据#采用AIC原则自动选择模型-前进法shuju.reg1shuju.regforward2summary(shuju.regforward2)#采用A

    2022年5月23日
    56
  • 让程序员崩溃的瞬间(非程序员勿入)(程序员形象都不好)

    阅读本文大概需要2.3333分钟。前方高能,每一个程序员看完,你不笑死个人,你来找我,我自己看了好几遍,反正笑的停不下来,太特么有才了。1.公司实习生找Bug2….

    2022年4月10日
    27
  • 什么是虚拟IP_虚拟机IP

    什么是虚拟IP_虚拟机IP【导读】虚拟ip和真实ip区别,下面就是191路由网整理的网络知识百科,来看看吧!大家好,我是191路由器网小编,上述问题将由我为大家讲解。虚拟ip和真实ip区别是真实IP是网络运营商提供的所以不能自己变更,虚拟IP是自己设置的可以变更。虚拟IP,就是一个未分配给真实主机的IP。也就是说对外提供服务器的主机除了有一个真实IP外还有一个虚拟IP,使用这两个IP中的任意一个都可以连接到这台主机。互联网…

    2022年10月20日
    0
  • jenkins 邮件_邮件发送服务

    jenkins 邮件_邮件发送服务前言前面已经实现在jenkins上展示html的测试报告,接下来只差最后一步,把报告发给你的领导,展示你的劳动成果了。安装EmailExtensionPlugin插件jenkins首页-

    2022年7月29日
    4
  • java编译过程_Java编译运行过程

    java编译过程_Java编译运行过程Java编译运行过程在上一篇文章中,我们了解了第一个Java入门程序,以及如何编译和运行第一个Java程序。本文主要了解以下编译和运行Java程序时会发生什么。此外,我们还会分析一些常见的问题。1Java程序编译过程在编译时,Java文件由Java编译器(它不与底层操作系统交互)将Java代码转换为字节码(.class)。2Java程序运行过程在Java程序运行中,会执行以下步骤:类加载器(C…

    2022年4月30日
    38
  • pycharm中安装opencv2_starter安装报错

    pycharm中安装opencv2_starter安装报错图像处理新人,想练习一下opencv库在PyCharm终端pipinstallopencv-python显示安装失败!!!查看了一下竟然是因为BOSEInterpreter是Anaconda去官网上下载了个python解释器就好了!!!给自己提个醒吧!

    2022年8月25日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号