Às vezes você encontra requisitos bobos, como login único de front-end! Quando você encontra uma necessidade, você tem que pensar em uma solução.
Aqui, darei a você uma solução simples de login único de front-end.
O que é usado é a transmissão de informações entre domínios postMessage e o monitoramento de armazenamento.
Os pontos de conhecimento usados neste artigo são: configuração de serviços de recursos estáticos, domínio cruzado, uso de postMessage, armazenamento de monitoramento no armazenamento
O primeiro passo é configurar dois serviços com portas diferentes.Usamos koa2 aqui para construir dois serviços para portas diferentes para simular a situação entre domínios que precisa ocorrer no trabalho real.
É muito simples e usa principalmente o middleware koa-static.
Também é muito fácil de construir. Se você quiser aprender conhecimentos relacionados ao nó, pode me adicionar no WeChat shouzi_1994 ou deixar suas informações de contato abaixo do blog. Não vou entrar em muitas bobagens aqui. vídeo e haverá etapas de construção detalhadas.
// localhost:4000const Koa = require('koa'); const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (o serviço inicia na porta 4000) app.listen(4000);// localhost:3000const Koa = require('koa'); )const app = new Koa();//Definir o caminho dos recursos estáticos const staticPath = './static'app.use(static( path.join( __dirname, staticPath) )) console.log (o serviço inicia na porta 4000) app.listen(4000); A segunda etapa, comunicação entre domínios postMessageVamos primeiro dar uma olhada na API postMessage
otherWindow.postMessage(mensagem, targetOrigin, [transferência]);
outra janela
Uma referência a outra janela, como a propriedade contentWindow de um iframe, o objeto de janela retornado pela execução de window.open ou window.frames nomeado ou indexado numericamente.
mensagem
Dados a serem enviados para outras janelas. Ele será serializado pelo algoritmo de clonagem estruturado. Isso significa que você pode transferir objetos de dados com segurança para a janela de destino, sem quaisquer restrições, sem serializá-los você mesmo. [1]
alvoOrigem
Especifique quais janelas podem receber eventos de mensagens através do atributo origin da janela. Seu valor pode ser uma string (indicando ilimitado) ou um URI. Ao enviar uma mensagem, se algum protocolo, endereço de host ou porta da janela de destino não corresponder ao valor fornecido por targetOrigin, a mensagem não será enviada somente se os três corresponderem completamente, a mensagem será enviada; Este mecanismo é usado para controlar para quais janelas as mensagens podem ser enviadas, por exemplo, ao usar postMessage para transmitir uma senha, este parâmetro é particularmente importante e seu valor deve ser exatamente igual ao atributo origin do destinatário pretendido; da mensagem contendo a senha para evitar que as senhas sejam interceptadas por terceiros mal-intencionados. Se você souber exatamente para qual janela a mensagem deve ser enviada, sempre forneça um valor exato para targetOrigin. O não fornecimento do alvo exato resultará no vazamento de dados para qualquer site malicioso interessado nos dados.
transferência opcional
É uma série de objetos transferíveis entregues ao mesmo tempo que a mensagem. A propriedade desses objetos será transferida para o destinatário da mensagem e o remetente não manterá mais a propriedade.
É fácil entender como funciona? Deixe-me explicar em chinês.
A janela filho (pai) a ser transferida. postMessage (conteúdo transmitido, para qual endereço transferir, [se as permissões são transferidas (geralmente não usadas)]);
Deixe-me avisar com antecedência que se você deseja transferir entre domínios, deve ser uma página pai-filho, ou seja, uma página através de js Open, ou uma página aninhada em iframe.
Ok, vamos começar a escrever código
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Documento</title></head><body> <!-- postMessage e iframe resolvem problemas comuns entre domínios--> Eu sou o conteúdo do site da porta 3000 <button onclick=send()>Envie uma mensagem para meu filho</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe ><script> function send() { window.frames[0].postMessage({a:1},http://localhost:4000); // Aciona o evento de mensagem da subpágina entre domínios}; window.addEventListener('message', function(event) { console.info('Meu filho escreveu uma carta', event); }, false);</script></body></html> <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Documento</title></head><body> <!-- postMessage e iframe resolvem problemas comuns entre domínios--> Eu sou o conteúdo do site da porta 4000 <button onclick=send()>Envie uma mensagem para o pai</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(Papai escreveu:, evento) },false) function send() { parent.postMessage({a:1}, 'http://localhost:3000'); // }</script></body></html>Neste ponto, implementamos a comunicação entre domínios entre páginas pai e filho, mas essa comunicação ocorre apenas dentro de uma janela e não atinge o efeito desejado.
Monitore alterações de valor e responda prontamenteNeste ponto todos precisam pensar no que pode ser visto por todos os sites com o mesmo nome de domínio no navegador?
Isso mesmo, armazenamento, só precisamos monitorar isso.
Aqui optamos por ouvir localStorage e agora fazemos melhorias nas subpáginas
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>Documento</title></head><body> <!-- postMessage e iframe resolvem problemas comuns entre domínios--> Eu sou o conteúdo do site da porta 4000 <button onclick=send()>Envie uma mensagem para o pai</button> <iframe style=display:none src=http://localhost:4000 frameborder=0></iframe> <script> window.addEventListener(message,function(event){ console.log(Papai escreveu:, evento) var data = JSON.stringify(event.data) window.localStorage.setItem(dados,dados) },false) window.onstorage(function(st){ console.log(st.key,st.value) }) function send() { parent.postMessage({a:1 }, 'http://localhost:3000'); // }</script></body></html>);Olha, agora somos capazes de responder ao conteúdo transmitido entre domínios?
pensarAgora que alcançamos a comunicação entre domínios entre duas páginas, como fazer três ou mais comunicação entre domínios? Na verdade, existe uma verdade. Agora que eu disse a verdade, experimente você mesmo o método de escrita.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.