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

全栈程序员站长

发布于 2022-09-19 10:08:54

4850

发布于 2022-09-19 10:08:54

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

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>