vue melompat ke tapak web pihak ketiga dan mengembalikan parameter selepas log masuk

Vue.js kini merupakan salah satu rangka kerja paling popular dalam pembangunan bahagian hadapan, menyediakan cara yang mudah dan cekap untuk membina antara muka pengguna interaktif. Apabila membangunkan aplikasi web, anda sering perlu berinteraksi dengan tapak web pihak ketiga, seperti log masuk dibenarkan OAuth2, pembayaran Alipay, dsb. Operasi ini akan melompat ke tapak web pihak ketiga, dan kemudian melompat kembali ke aplikasi asal selepas menyelesaikan operasi. Artikel ini akan membincangkan cara untuk melompat ke tapak web pihak ketiga untuk log masuk dalam Vue, dan mengendalikannya dengan sewajarnya apabila mengembalikan parameter.

Lompat ke tapak web pihak ketiga

Pertama, kami perlu memperkenalkan pautan ke tapak web pihak ketiga dalam Vue. Lazimnya, pautan ini akan mempunyai beberapa parameter, seperti redirect_uri, client_id dan parameter lain yang digunakan untuk mengenal pasti aplikasi dan mengubah hala URI. Katakan kita ingin melompat ke http://example.com/login, kita perlu menggunakan tag <a> untuk membina pautan:

<template>
  <div>
    <a href="http://example.com/login?redirect_uri={{redirect_uri}}&client_id={{client_id}}">
      跳转到第三方网站
    </a>
  </div>
</template>

Dalam pautan ini, kami menggunakan sintaks templat Vue untuk memasukkan dua parameter redirect_uri dan client_id. Parameter ini perlu ditakrifkan terlebih dahulu dan dihantar ke dalam komponen.

Terima parameter pulangan

Apabila pengguna menyelesaikan operasi di tapak web pihak ketiga, dia akan diubah hala semula ke aplikasi kami. Semasa proses ini, tapak web pihak ketiga akan menambah beberapa parameter pada rentetan pertanyaan pautan ubah hala, seperti code, state, dsb. Kami perlu mengekstrak dan memproses parameter ini untuk menyelesaikan operasi seterusnya.

Mengendalikan rentetan pertanyaan dalam Vue boleh dilakukan menggunakan objek vue-router, yang secara automatik mengekstrak parameter pertanyaan URL dan mendedahkannya kepada kami sebagai objek. Katakan kita mempunyai laluan berikut yang ditakrifkan dalam laluan: Query

import VueRouter from 'vue-router';
import LoginCallback from './components/LoginCallback.vue';

const router = new VueRouter({
  routes: [
    {
      path: '/login/callback',
      component: LoginCallback
    }
  ]
});

Kita boleh lulus

dalam komponen LoginCallback untuk mendapatkan parameter pulangan: $route.query

<template>
  <div>
    <p v-if="code">授权码: {{code}}</p>
    <p v-if="state">状态码: {{state}}</p>
  </div>
</template>

<script>
export default {
  name: 'LoginCallback',
  data() {
    return {
      code: this.$route.query.code,
      state: this.$route.query.state
    }
  }
}
</script>

Dalam contoh ini, kita lulus

Kaedah melekapkan atribut data dan $route.query dalam code kepada tika komponen dan menggunakan state dalam templat untuk mengawal paparan berdasarkan sama ada parameter wujud. Jika parameter wujud, kami memaparkan nilai yang sepadan jika parameter tidak wujud, tiada apa yang dipaparkan. v-if

Dalam pembangunan sebenar, kami mungkin perlu melakukan beberapa operasi tambahan, seperti menyerahkan kod kebenaran kepada pelayan untuk pengesahan, menilai sama ada operasi itu berjaya berdasarkan kod status dalam parameter, dsb. Operasi ini boleh diselesaikan dalam fungsi cangkuk kitaran hayat komponen. Contohnya, dalam fungsi cangkuk

, kita boleh menggunakan perpustakaan created untuk menyerahkan kod kebenaran kepada pelayan: axios

<script>
  import axios from 'axios';

  export default {
    name: 'LoginCallback',
    created() {
      if (this.code) {
        axios.post('/oauth/token', {
          grant_type: 'authorization_code',
          code: this.code,
          redirect_uri: 'http://localhost:8080/login/callback',
          client_id: 'my_client_id',
          client_secret: 'my_client_secret'
        }).then(response => {
          console.log(response.data);
        }).catch(error => {
          console.log(error);
        });
      }
    },
    data() {
      return {
        code: this.$route.query.code,
        state: this.$route.query.state
      }
    }
  }
</script>

Dalam contoh ini, kami menggunakan perpustakaan

untuk menghantar POST minta kepada pelayan Minta token akses. Kami membungkus parameter seperti kod kebenaran, mengubah hala URI, ID pelanggan dan rahsia pelanggan dalam permintaan POST dan mengendalikannya dalam fungsi panggil balik kejayaan dan kegagalan masing-masing. Dengan cara ini, kami boleh menyelesaikan operasi melompat ke tapak web pihak ketiga dengan mudah untuk log masuk dan menerima parameter pemulangan dalam Vue. axios

Ringkasan

Dalam artikel ini, kami memperkenalkan cara untuk melompat ke tapak web pihak ketiga untuk log masuk dalam Vue dan mengendalikannya apabila mengembalikan parameter. Kami menggunakan sintaks templat untuk memasukkan parameter lompat dan mengekstrak serta memproses parameter pulangan dalam komponen. Sebagai pembangun bahagian hadapan, adalah penting untuk memahami cara berinteraksi dengan tapak web pihak ketiga dan mengendalikan parameter pulangan. Saya percaya bahawa melalui pengenalan artikel ini, anda telah dapat menguasai kemahiran ini dan mengaplikasikannya dalam pembangunan sebenar.

Atas ialah kandungan terperinci vue melompat ke tapak web pihak ketiga dan mengembalikan parameter selepas log masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!