網頁版的支付寶授權登錄（vue+java）

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>

如果掃碼登錄跳轉到這個地方

 

 

 是沒有在支付寶管理后台配置