Rumah > Artikel > hujung hadapan web > 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.
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 3499910bf9dac5ae3c52d5ede7383485
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.
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
, 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
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!