Gerenciando Subdomínios Curinga com Roteador Vue

Matt Maribojoc Blocked Unblock Seguir Seguindo 1 de janeiro

Manipulando Subdomínios

Existem muitos casos de uso nos quais um aplicativo da Web precisará usar subdomínios de caractere curinga – os exemplos mais comuns são aplicativos quando os usuários têm seu próprio subdomínio (por exemplo, mysite.wordpress.com ). No entanto, o roteador vue não vem com essa funcionalidade embutida e precisará ser implementado por nós. Isso será realizado usando dois recursos do roteador vue que são facilmente encontrados em sua documentação: rotas nomeadas e a função router.beforeEach() .

Existem duas maneiras de identificar uma rota vue, seu caminho e seu nome. Embora um caminho seja uma parte obrigatória de todas as rotas, o nome é uma opção opcional, mas nos permitirá separar entre a solicitação de roteador inicial e a redirecionada com a subrotadora. Em um aplicativo completo, essa deve ser a última rota, pois também captura todas as entradas curinga. Simples o suficiente.

Depois de criar as rotas nomeadas, a etapa mais desafiadora é encontrar uma maneira de vinculá-las, dependendo do subdomínio. Para fazer isso, teremos que usar o método beforeEach do Vue Router. O método beforeEach é um dos protetores de navegação que permite ao roteador redirecionar ou cancelar solicitações. Esse método, como o próprio nome indica, é chamado antes que o roteador pesquise a matriz de rotas, o que nos permitirá fazer toda a verificação e roteamento de subdomínios antes que qualquer coisa seja carregada.

Para começar, no index.js do seu roteador, adicione o seguinte código para definir o beforeEach navegação beforeEach . Isso também está incluído na documentação, portanto, sinta-se à vontade para usá-lo se achar mais fácil. Eu não vou ficar ofendido.

Então, analisando o URL passado para o roteador, podemos determinar se existe um subdomínio. Como o código abaixo usa .split para obter o subdomínio, se não houver nenhum subdomínio, ele será definido como igual ao seu nome de domínio. Aqui estão alguns exemplos de clareza.

  • example.mysite.com – o subdomínio será igual a "exemplo"
  • mysite.com – subdomínio será igual a "mysite"

A instrução if tem duas verificações. Primeiro, verifica se não há subdomínio que mencionei anteriormente. Em segundo lugar, verifica se a solicitação está apontada para uma rota que já é a página correta. Essa segunda verificação é muito importante porque, sem ela, esse loop se chamaria infinitamente e arruinaria seu código. Agora, as linhas chave neste bloco de código são as duas próximas chamadas. next() é uma função que é necessária para permitir que o roteador continue em sua busca pela rota correta. De acordo com a documentação …

  • .next ({caminho: caminho} ou {nome: nome}) – redireciona para um novo local, aborta a navegação atual e inicia um novo
  • next () – sem nenhum parâmetro se move para o próximo gancho no pipeline

Nota: este tutorial foi desenvolvido para aplicativos em que todos os subdomínios do usuário usam o mesmo componente de página. Se você precisar de vários componentes, apenas inclua instruções if que alterem o nome da rota nomeada na chamada .next ().

Agora, vou discutir como testar isso localmente em seu computador e também como lidar com subdomínios de caractere curinga no Google Domains.

Testando localmente e com o Google Domains

Principalmente ao implementar subdomínios estáticos predeterminados, você pode simplesmente adicionar o CNAME ao seu DNS e redirecionar tudo facilmente, mas com os curingas, ele fica um pouco menos intuitivo porque é impossível incluir explicitamente todos os subdomínios possíveis em seu DNS. Para o Google Domains, basta adicionar um CNAME, mas faça a referência a *, que denota um curinga. Eu suponho que outros provedores tenham processos semelhantes.

Fazer com que subdomínios funcionem localmente é muito mais confuso porque seu sistema naturalmente inicia projetos em localhost , o que não permite subdomínios ou reencaminhamento. Para resolver isso, instale o dnsmasq , uma pequena ferramenta para permitir que você controle seu DNS local. Existe um excelente artigo do Medium, de Khary Sharpe, que pode orientá-lo no processo de configuração do DNS local.

Espero que este pequeno guia tenha ajudado. Boa sorte!