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

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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>

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

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