في بعض الأحيان تواجه متطلبات سخيفة، مثل تسجيل الدخول الموحد للواجهة الأمامية! عندما تواجه حاجة ما، عليك أن تفكر في حل.
سأقدم لك هنا حلاً بسيطًا لتسجيل الدخول الفردي للواجهة الأمامية.
ما يتم استخدامه هو نقل المعلومات عبر النطاقات postMessage ومراقبة التخزين.
نقاط المعرفة المستخدمة في هذه المقالة هي إعداد koa لخدمات الموارد الثابتة، والمجالات المشتركة، واستخدام postMessage، وتخزين مراقبة التخزين
الخطوة الأولى هي إعداد خدمتين بمنافذ مختلفة.نحن نستخدم koa2 هنا لبناء خدمتين لمنافذ مختلفة لمحاكاة الوضع عبر المجال الذي يجب أن يحدث في العمل الحقيقي.
إنه بسيط جدًا ويستخدم بشكل أساسي البرامج الوسيطة koa-static.
كما أنه من السهل جدًا إنشائه، إذا كنت تريد تعلم المعرفة المتعلقة بالعقدة، فيمكنك إضافتي على WeChat shouzi_1994 أو ترك معلومات الاتصال الخاصة بك أسفل المدونة، ولن أخوض في الكثير من الهراء هنا فيديو وسيكون هناك خطوات بناء مفصلة.
// localhost:4000const Koa = require('koa'); const path = require('path')const static = require('koa-static')const app = new Koa();// تعيين مسار الموارد الثابتة const staticPath = './static'app.use(static( path.join( __dirname, staticPath)) )) console.log (تبدأ الخدمة على المنفذ 4000) app.listen(4000);// localhost:3000const Koa = require('koa'); const path = require('path')const static = require('koa-static') )const app = new Koa();// تعيين مسار الموارد الثابتة const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (تبدأ الخدمة على المنفذ 4000) app.listen(4000); الخطوة الثانية، هي التواصل عبر النطاقات postMessageدعونا أولاً نلقي نظرة على postMessage API
otherWindow.postMessage(message, targetOrigin, [transfer]);
window.otherWindow
مرجع إلى نافذة أخرى، مثل خاصية contentWindow الخاصة بإطار iframe، أو كائن النافذة الذي تم إرجاعه عن طريق تنفيذ window.open، أو window.frames المسمى أو المفهرس رقميًا.
رسالة
البيانات المراد إرسالها إلى النوافذ الأخرى. سيتم إجراء تسلسل لها بواسطة خوارزمية الاستنساخ المنظمة. وهذا يعني أنه يمكنك نقل كائنات البيانات بأمان إلى النافذة المستهدفة دون أي قيود دون إجراء تسلسل لها بنفسك. [1]
targetOrigin
حدد النوافذ التي يمكنها استقبال أحداث الرسائل من خلال السمة الأصلية للنافذة. يمكن أن تكون قيمتها سلسلة (تشير إلى غير محدود) أو URI. عند إرسال رسالة، إذا كان أي من البروتوكولات أو عنوان المضيف أو منفذ النافذة المستهدفة لا يتطابق مع القيمة المقدمة من targetOrigin، فلن يتم إرسال الرسالة إلا إذا كانت الثلاثة متطابقة تمامًا، فسيتم إرسال الرسالة. يتم استخدام هذه الآلية للتحكم في رسائل Windows التي يمكن إرسالها إليها، على سبيل المثال، عند استخدام postMessage لإرسال كلمة المرور، تكون هذه المعلمة ذات أهمية خاصة، ويجب التأكد من أن قيمتها مطابقة تمامًا للسمة الأصلية للمستلم المقصود. للرسالة التي تحتوي على كلمة المرور لمنع اعتراض كلمات المرور من قبل أطراف ثالثة ضارة. إذا كنت تعرف بالضبط النافذة التي يجب إرسال الرسالة إليها، فقم دائمًا بتوفير قيمة دقيقة لـ targetOrigin بدلاً من ذلك. سيؤدي الفشل في تقديم الهدف الدقيق إلى تسرب البيانات إلى أي موقع ضار مهتم بالبيانات.
نقل اختياري
وهي عبارة عن سلسلة من الكائنات القابلة للتحويل يتم تسليمها في نفس وقت تسليم الرسالة، وسيتم نقل ملكية هذه الكائنات إلى متلقي الرسالة، ولن يحتفظ المرسل بملكيتها بعد الآن.
هل من السهل أن نفهم كيف يعمل؟ اسمحوا لي أن أشرح ذلك باللغة الصينية.
النافذة الفرعية (الأصلية) التي سيتم نقلها postMessage (المحتوى المرسل، والعنوان الذي سيتم النقل إليه، [ما إذا كانت الأذونات منقولة (غير مستخدمة بشكل عام)])؛
دعني أخبرك مقدمًا أنه إذا كنت تريد النقل عبر المجالات، فيجب أن تكون صفحة الأصل والفرع، أي صفحة من خلال js Open، أو صفحة متداخلة في iframe.
حسنًا، فلنبدأ بكتابة التعليمات البرمجية
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>المستند</title></head><body> <!-- يحل كل من postMessage وiframe المشكلات الشائعة عبر النطاقات--> أنا محتوى موقع المنفذ 3000 <button onclick=send()>أرسل رسالة إلى ابني</button> <iframe style=display:none src=http://localhost:4000frameborder=0></iframe ><script> function send() { window.frames[0].postMessage({a:1},http://localhost:4000); // تشغيل حدث الرسالة للصفحة الفرعية عبر النطاق} window.addEventListener('message', function(event) { console.info('ابني كتب رسالة', حدث); }, خطأ);</script></body></html> <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>المستند</title></head><body> <!-- يحل كل من postMessage وiframe المشكلات الشائعة عبر النطاقات--> أنا محتوى موقع المنفذ 4000 <button onclick=send()>أرسل رسالة إلى أبي</button> <iframe style=display:none src=http://localhost:4000frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(كتب أبي:، حدث) },خطأ) وظيفة إرسال() {parent.postMessage({a:1}, 'http://localhost:3000'); // </script></body></html>في هذه المرحلة، قمنا بتنفيذ اتصال عبر المجال بين الصفحات الرئيسية والفرعية، ولكن هذا الاتصال يحدث فقط في نافذة واحدة ولا يحقق التأثير الذي أريده.
مراقبة تغييرات القيمة والاستجابة لها على الفورفي هذه المرحلة يحتاج الجميع إلى التفكير فيما يمكن أن تشاهده جميع مواقع الويب التي تحمل نفس اسم النطاق على المتصفح؟
هذا صحيح، التخزين، نحتاج فقط إلى مراقبة هذا.
نختار هنا الاستماع إلى localStorage ونجري الآن تحسينات على الصفحات الفرعية
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA -المحتوى المتوافق=ie=edge> <title>المستند</title></head><body> <!-- يحل كل من postMessage وiframe المشكلات الشائعة عبر النطاقات--> أنا محتوى موقع المنفذ 4000 <button onclick=send()>أرسل رسالة إلى أبي</button> <iframe style=display:none src=http://localhost:4000frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(كتب أبي:، حدث) var data = JSON.stringify(event.data) window.localStorage.setItem(data,data) },false) window.onstorage(function(st){ console.log(st.key,st.value) }) وظيفة إرسال() {parent.postMessage({a:1) }, 'http://localhost:3000'); // </script></body></html>انظر، هل نحن الآن قادرون على الرد على المحتوى المنقول عبر المجالات؟
يفكرالآن بعد أن حققنا اتصالاً عبر المجال بين صفحتين، كيف يمكننا إجراء ثلاث أو أكثر من الاتصالات عبر المجال؟ في الواقع، هناك حقيقة. والآن بعد أن أخبرتك الحقيقة، اذهب واختبر طريقة الكتابة بنفسك.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.