Terkadang Anda menghadapi persyaratan konyol, seperti sistem masuk tunggal front-end! Ketika Anda menghadapi suatu kebutuhan, Anda harus memikirkan solusinya.
Di sini saya akan memberi Anda solusi masuk tunggal front-end yang sederhana.
Yang digunakan adalah transmisi informasi lintas domain postMessage dan pemantauan penyimpanan.
Poin pengetahuan yang digunakan dalam artikel ini adalah koa menyiapkan layanan sumber daya statis, lintas domain, penggunaan postMessage, penyimpanan pemantauan penyimpanan
Langkah pertama adalah menyiapkan dua layanan dengan port berbeda.Kami menggunakan koa2 di sini untuk membangun dua layanan ke port berbeda untuk mensimulasikan situasi lintas domain yang perlu terjadi dalam pekerjaan nyata.
Ini sangat sederhana dan terutama menggunakan middleware koa-statis.
Pembuatannya juga sangat mudah. Jika Anda ingin mempelajari pengetahuan terkait node, Anda dapat menambahkan saya di WeChat shouzi_1994 atau meninggalkan informasi kontak Anda di bawah blog video dan akan ada langkah-langkah pembangunan rinci.
// localhost:4000const Koa = require('koa'); const path = require('path')const static = require('koa-static')const app = new Koa();//Setel jalur sumber daya statis const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (layanan dimulai pada port 4000) app.listen(4000);// localhost:3000const Koa = require('koa'); const path = require('path')const static = require('koa-static' )const app = new Koa();//Setel jalur sumber daya statis const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (layanan dimulai pada port 4000) app.listen(4000); Langkah kedua, komunikasi lintas domain postMessagePertama mari kita lihat API postMessage
otherWindow.postMessage(pesan, targetOrigin, [transfer]);
Jendela lainnya
Referensi ke jendela lain, seperti properti contentWindow dari iframe, objek jendela dikembalikan dengan mengeksekusi window.open, atau diberi nama atau diindeks secara numerik window.frames.
pesan
Data yang akan dikirim ke jendela lain. Ini akan diserialkan dengan algoritma kloning terstruktur. Ini berarti Anda dapat dengan aman mentransfer objek data ke jendela target tanpa batasan apa pun tanpa membuat serialnya sendiri. [1]
targetAsal
Tentukan jendela mana yang dapat menerima peristiwa pesan melalui atribut asal jendela. Nilainya dapat berupa string (menunjukkan tidak terbatas) atau URI. Saat mengirim pesan, jika salah satu protokol, alamat host atau port jendela target tidak cocok dengan nilai yang diberikan oleh targetOrigin, pesan tidak akan dikirim hanya jika ketiganya cocok, pesan akan dikirim. Mekanisme ini digunakan untuk mengontrol ke mana pesan Windows dapat dikirim; misalnya, saat menggunakan postMessage untuk mengirimkan kata sandi, parameter ini sangat penting, dan nilainya harus dipastikan sama persis dengan atribut asal penerima yang dituju. pesan yang berisi kata sandi untuk mencegah kata sandi disadap oleh pihak ketiga yang jahat. Jika Anda tahu persis ke jendela mana pesan harus dikirim, selalu berikan nilai yang tepat untuk targetOrigin. Kegagalan untuk memberikan target yang tepat akan mengakibatkan kebocoran data ke situs jahat mana pun yang tertarik dengan data tersebut.
transfer opsional
Ini adalah serangkaian objek yang dapat ditransfer yang dikirimkan bersamaan dengan pesan. Kepemilikan objek tersebut akan dialihkan ke penerima pesan, dan pengirim tidak lagi memiliki kepemilikan.
Apakah mudah untuk memahami cara kerjanya? Izinkan saya menjelaskannya dalam bahasa Mandarin.
Jendela anak (induk) yang akan ditransfer. postMessage (konten yang dikirimkan, alamat tujuan transfer, [apakah izin ditransfer (umumnya tidak digunakan)]);
Izinkan saya memberi tahu Anda sebelumnya bahwa jika Anda ingin mentransfer lintas domain, itu harus berupa halaman induk-anak, yaitu halaman melalui js Open, atau halaman yang bersarang di iframe.
Oke, mari kita mulai menulis kode
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=edge> <title>Dokumen</title></head><body> <!-- postMessage dan iframe menyelesaikan masalah umum lintas domain--> Saya adalah konten situs web port 3000 <button onclick=send()>Kirim pesan ke anak saya</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe ><script> function send() { window.frames[0].postMessage({a:1},http://localhost:4000); // Memicu kejadian pesan subhalaman lintas domain} window.addEventListener('message', function(event) { console.info('Anak saya menulis surat', event); }, false);</script></body></html> <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=edge> <title>Dokumen</title></head><body> <!-- postMessage dan iframe menyelesaikan masalah umum lintas domain--> Saya adalah konten situs web port 4000 <button onclick=send()>Kirim pesan ke ayah</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <skrip> window.addEventListener(message,function(event){ console.log(Ayah menulis:, event) },false) function send() { parent.postMessage({a:1}, 'http://localhost:3000'); // }</skrip></body></html>Pada titik ini, kami telah menerapkan komunikasi lintas domain antara halaman induk dan anak, namun komunikasi ini hanya terjadi dalam satu jendela dan tidak mencapai efek yang saya inginkan.
Pantau perubahan nilai dan tanggapi dengan segeraPada titik ini semua orang perlu memikirkan apa yang bisa dilihat oleh semua website dengan nama domain yang sama di browser?
Benar sekali, penyimpanannya, kita hanya perlu memantaunya saja.
Disini kami memilih untuk mendengarkan localStorage dan sekarang kami melakukan perbaikan pada subhalaman
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Konten yang kompatibel=ie=edge> <title>Dokumen</title></head><body> <!-- postMessage dan iframe menyelesaikan masalah umum lintas domain--> Saya adalah konten situs web port 4000 <button onclick=send()>Kirim pesan ke ayah</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <skrip> window.addEventListener(pesan,fungsi(acara){ console.log(Ayah menulis:, acara) var data = JSON.stringify(event.data) window.localStorage.setItem(data,data) },false) window.onstorage(fungsi(st){ console.log(st.key,st.value) }) function send() { parent.postMessage({a:1 }, 'http://localhost:3000'); // }</script></body></html>Lihat, apakah kini kami dapat merespons konten yang dikirimkan melalui domain?
memikirkanSekarang kita telah mencapai komunikasi lintas domain antara dua halaman, bagaimana cara melakukan tiga atau lebih komunikasi lintas domain? Faktanya, ada kebenarannya. Sekarang setelah saya mengatakan yang sebenarnya kepada Anda, pergilah dan alami sendiri metode penulisannya.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.