vue qq ralat keluar pihak ketiga

Kata Pengantar

Apabila membangunkan fungsi log masuk pihak ketiga QQ Vue, anda mungkin menghadapi masalah ralat apabila keluar. Artikel ini akan memperkenalkan prinsip masalah ini dan cara menyelesaikannya, dengan harapan dapat membantu pembangun.

Perihalan Masalah

Apabila menggunakan Vue untuk membangunkan fungsi log masuk pihak ketiga QQ, apabila pengguna cuba log keluar, ralat berikut akan muncul:

Uncaught TypeError: Tidak boleh read property ' open' of null

Ralat ini akan muncul apabila melaksanakan kod berikut:

window.open("https://graph.qq.com/oauth2.0/logout? access_token=" + token + "&callback=message");

Sebab ralat ini adalah kerana apabila kaedah window.open dilaksanakan, halaman telah dipunggah dan JavaScript masih menganggap kod ini sebagai kod boleh laku . Memandangkan halaman telah dipunggah, JavaScript tidak boleh mendapatkan elemen DOM yang sepadan, yang akan menyebabkan ralat ini muncul.

Penyelesaian

Punca masalah ialah kod log keluar dilaksanakan pada masa yang salah Kod tidak sepatutnya dapat melaksanakan tanggungjawab log keluar secara normal sehingga DOM telah dimuatkan. Untuk menyelesaikan masalah ini, kami boleh mempertimbangkan untuk melaksanakan logik log keluar dalam fungsi kitaran hayat komponen Vue.

Secara khusus, anda boleh menambah kod berikut dalam fungsi kitaran hayat beforeMount komponen Vue:

window.addEventListener('beforeunload', function () {

const token = localStorage.getItem('token');
if (token) {
    window.open(`https://graph.qq.com/oauth2.0/logout?access_token=${token}&callback=message`, '_self');
}

} );

Fungsi utama kod ini adalah untuk mendengar acara sebelum pemunggahan sebelum komponen hendak dipasang, dan kemudian laksanakan kod yang berkaitan untuk keluar dari akaun QQ. Menggunakan kaedah ini, walaupun halaman telah dinyahpasang, ralat di atas tidak akan muncul lagi apabila log keluar daripada akaun QQ.

Ringkasan

Artikel ini terutamanya memperkenalkan masalah ralat log keluar apabila menggunakan fungsi log masuk pihak ketiga QQ dalam Vue dan menyediakan penyelesaian terperinci. Apabila melaksanakan fungsi yang serupa, anda perlu memberi perhatian kepada masa pelaksanaan kod, terutamanya di bawah rangka kerja bahagian hadapan seperti Vue Kerana ciri kitaran hayatnya, kemungkinan ralat akan menjadi lebih besar. Oleh itu, semasa menulis fungsi yang serupa, anda perlu berhati-hati dan membaca dokumen yang berkaitan dengan teliti untuk mengelakkan masalah yang sama.

Atas ialah kandungan terperinci vue qq ralat keluar pihak ketiga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!