支付宝授权登录淘宝_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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • JDK卸载和彻底删除

    JDK卸载和彻底删除第一步:点击“控制面板”。第二步:点击“卸载程序”。第三步:进入到“程序和功能”界面,找到jdk的两个程序:①java8update171(64-bit);②javaSEDevelopmentKit8update171(64-bit);右击卸载即可第四步:在“运行”中输入Regedit,打开注册表编辑器,找到HKEY_LOCAL_MACHINE/SOFTWARE/JavaSo…

    2022年6月30日
    41
  • vgg网络论文_dna结构综述论文

    vgg网络论文_dna结构综述论文原文地址:https://arxiv.org/pdf/1409.1556.pdfVGG简介:VGG卷积神经网络是牛津大学在2014年提出来的模型。当这个模型被提出时,由于它的简洁性和实用性,马上成为了当时最流行的卷积神经网络模型。它在图像分类和目标检测任务中都表现出非常好的结果。在2014年的ILSVRC比赛中,VGG在Top-5中取得了92.3%的正确率。同年的冠军是googl…

    2022年10月21日
    2
  • 编译原理实验一词法分析器_编译原理词法错误举例

    编译原理实验一词法分析器_编译原理词法错误举例编写一个词法分析程序

    2022年9月28日
    2
  • 【灯哥开源四足机器人】推荐一个开源四足机器狗项目,8自有度,两个舵机控制一个腿,apache开源协议的,已经迭代了好多个版本了,设计的非常好。有官方淘宝店,没有3D打印机的可以购买散装零件自己组装[通俗易懂]

    【灯哥开源四足机器人】推荐一个开源四足机器狗项目,8自有度,两个舵机控制一个腿,apache开源协议的,已经迭代了好多个版本了,设计的非常好。有官方淘宝店,没有3D打印机的可以购买散装零件自己组装[通俗易懂]目录前言1,关于【灯哥开源四足机器人】2,使用py-apple3,总结前言本文的原文连接是:https://blog.csdn.net/freewebsys/article/details/108971807未经博主允许不得转载。博主地址是:http://blog.csdn.net/freewebsys1,关于【灯哥开源四足机器人】灯哥开源的四足机器人(不是我)。作者的主页:https://www.bilibili.com/video/BV1Ka4y1t7CLgithub首页:h

    2022年6月9日
    70
  • BN层代码实现_无代码

    BN层代码实现_无代码BatchNormalization开发环境项目代码结构生成虚拟数据程序神经网络构建带初始化模型的神经网络构建带BN的FC网络和不带BN的FC网络对比不同初始化方式带BN的网络模型对比开发环境python–3.7torch–1.8+cu101torchsummarytorchvision–0.6.1+cu101PILnumpyopencv-pythonpillow项目代码结构src文件夹存储了带有BN的FC训练文件、基于初始化的带BN的FC训练文件以及BN在训练阶段的操作。t

    2022年10月14日
    2
  • 分酒问题(DFS解法)

    分酒问题(DFS解法)题目大概是这样:已知有三个容量分别为3千克、5千克和8千克的并且是没有刻度的酒瓶,3千克和5千克的瓶子均装满了酒,而8千克的瓶子为空。现要求仅用这三个酒瓶将这些酒均分为两个4千克并分别装入5千克和8

    2022年7月2日
    32

发表回复

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

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