때로는 프런트엔드 싱글 로그인과 같은 어리석은 요구 사항이 발생할 수도 있습니다. 요구 사항이 발생하면 해결책을 생각해야 합니다.
여기서는 간단한 프런트 엔드 단일 로그인 솔루션을 제공하겠습니다.
사용되는 것은 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, [전송]);
다른 창
iframe의 contentWindow 속성, window.open을 실행하여 반환된 창 객체, 명명되거나 숫자로 색인화된 window.frames와 같은 다른 창에 대한 참조입니다.
메시지
다른 창으로 보낼 데이터입니다. 구조화된 복제 알고리즘에 의해 직렬화됩니다. 이는 데이터 개체를 직접 직렬화하지 않고도 제한 없이 대상 창으로 안전하게 전송할 수 있음을 의미합니다. [1]
타겟원산지
창의 원본 속성을 통해 메시지 이벤트를 수신할 수 있는 창을 지정합니다. 해당 값은 문자열(무제한 표시) 또는 URI일 수 있습니다. 메시지를 보낼 때 대상 창의 프로토콜, 호스트 주소 또는 포트 중 하나라도 targetOrigin에서 제공한 값과 일치하지 않으면 세 가지가 완전히 일치하는 경우에만 메시지가 전송됩니다. 이 메커니즘은 어떤 Windows 메시지를 보낼 수 있는지 제어하는 데 사용됩니다. 예를 들어 postMessage를 사용하여 비밀번호를 전송할 때 이 매개변수는 특히 중요하며 해당 값은 의도된 수신자의 원본 속성과 정확히 동일해야 합니다. 악의적인 제3자가 비밀번호를 가로채는 것을 방지하기 위해 비밀번호가 포함된 메시지를 차단합니다. 메시지를 어느 창으로 보내야 하는지 정확히 알고 있다면 대신 항상 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(아빠가 작성함:, 이벤트) },false) function send() { 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,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(아빠가 쓴 것:, 이벤트) var data = JSON.stringify(event.data) window.localStorage.setItem(data,data) },false) window.onstorage(function(st){ console.log(st.key,st.value) }) function send() { parent.postMessage({a:1 }, 'http://localhost:3000') // }</script></body></html>이제 도메인을 통해 전송되는 콘텐츠에 응답할 수 있습니까?
생각하다이제 두 페이지 간의 도메인 간 통신을 달성했습니다. 3개 이상의 도메인 간 통신을 수행하는 방법은 무엇입니까? 사실, 진실이 있습니다. 이제 사실대로 말씀드렸으니 직접 가서 글쓰기 방법을 경험해 보세요.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.