Иногда вы сталкиваетесь с глупыми требованиями, такими как единый вход в систему! Когда вы сталкиваетесь с необходимостью, вам нужно подумать о решении.
Здесь я дам вам простое внешнее решение для единого входа.
Используется междоменная передача информации postMessage и мониторинг хранилища.
В этой статье используются такие знания, как настройка служб статических ресурсов, междоменность, использование postMessage, хранение данных мониторинга onstorage.
Первый шаг — настроить две службы с разными портами.Здесь мы используем 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Давайте сначала взглянем на API postMessage.
OtherWindow.postMessage(сообщение, targetOrigin, [перенос]);
другое окно
Ссылка на другое окно, например свойство contentWindow iframe, объект окна, возвращаемый при выполнении window.open, или именованный или числовой индекс window.frames.
сообщение
Данные для отправки в другие окна. Он будет сериализован с помощью алгоритма структурированного клонирования. Это означает, что вы можете безопасно переносить объекты данных в целевое окно без каких-либо ограничений, не сериализуя их самостоятельно. [1]
targetOrigin
Укажите, какие окна могут получать события сообщений, с помощью атрибута origin окна. Его значение может быть строкой (обозначающей неограниченный доступ) или 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, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</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('Мой сын написал письмо', 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 -Compatible content=ie=edge> <title>Document</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(Dad написал:, event) },false) function send() { родитель.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, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Document</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(Pad написал:, event) var data = JSON.stringify(event.data) window.localStorage.setItem(data,data) },false) window.onstorage(function(st){ console.log(st.key,st.value) }) function send() { родитель.postMessage({a:1 }, 'http://localhost:3000'); // </script></body></html>Посмотрите, можем ли мы теперь реагировать на контент, передаваемый через домены?
думатьТеперь, когда мы добились междоменного взаимодействия между двумя страницами, как осуществить три или более междоменных взаимодействия? На самом деле, есть истина. Теперь, когда я рассказал вам правду, пойдите и испытайте метод письма на себе.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.