Build Your First Router in Node with Express

Se fez algum desenvolvimento web com Nodo nos últimos anos, provavelmente usou o Express. Mesmo que não o tenha utilizado directamente, muitas estruturas destinadas a tornar o desenvolvimento web ainda mais simples são construídas em Express.

Uma das características chave em Express é a capacidade de criar rotas. Uma combinação infinita de URLs pode atingir o mesmo servidor Express, e as rotas são como se pode determinar que URLs executam que pedaço de código. Pode ter parâmetros e wildcards para que não tenha de declarar explicitamente cada endpoint.

Neste tutorial, vou acompanhá-lo na criação de um servidor e ensinar-lhe tudo o que precisa de saber sobre rotas no Express.

O que é uma Rota no Express?

Roteiros determinam quais os dados que devem ser entregues dado qualquer URL. Tomemos como exemplo o servidor de ficheiros mais básico. Digamos que tem uma estrutura de ficheiro de:

files/├── images/│ ├── cat.png│ ├── dog.jpg│ └── pig.bmp└── text/ ├── README.md └── todo.txt

Poderia então executar um servidor HTTP simples que servirá automaticamente esses ficheiros e criará um índice para os directórios. Não há files/index.html, mas o servidor ainda está a gerar uma página web e a servir conteúdo com base nos ficheiros dessa pasta. Se for a /images/cow.gif, receberá um erro 404 – mesmo não havendo lá nenhum ficheiro, continua a servir alguma coisa.

npm install -g http-servercd fileshttp-server

In Express, uma rota consiste num method, um path, e um handler.

Métodos, Caminhos, e Manipuladores, Oh Meu!

O method poderia ser qualquer verbo HTTP, tal como GET (para obter conteúdo – é isto que a maioria das páginas web usa), ou POST (para enviar conteúdo para o servidor – isto é comum com formulários HTML). Pode também especificar que deseja que o Express trate o mesmo caminho para todos os métodos se escolher.

O path é uma string ou uma expressão regular que descreve o URL relativo. Se estiver a trabalhar com a raiz da sua aplicação, isto descreve o URL absoluto. Um caminho pode ser definido de algumas maneiras.

O método e o caminho são essenciais para saber quando fazer algo, mas o manipulador é a função de chamada de retorno que realmente é chamada nesses casos. Um manipulador é passado um request, um response, e um next callback, e esses argumentos são tipicamente escritos como (req, res, next)..

• Pedido (req): O pedido contém todo o tipo de informações sobre o que foi pedido pelo utilizador. A partir daqui pode aceder ao caminho, parâmetros, cabeçalhos, e uma miríade de outras coisas. Para tudo sobre um pedido, pode consultar a referência API
• Resposta (): A resposta é como se envia a informação ao utilizador. A forma mais simples de enviar dados de volta é com o método .send (por exemplo res.send('Hello, world!')), mas existem muitos outros métodos. Mais uma vez, é possível encontrar todos os métodos na referência API
• Próximo Callback (next): A função next permite-lhe utilizar vários manipuladores para a mesma rota. Pode usar um manipulador para processar informação, e quando o fizer pode chamar next() para assinalar que está OK para passar ao próximo manipulador. Se passar numa corda, em vez disso, irá atirar um erro, que pode apanhar noutro local, ou mostrar ao utilizador (por exemplo next('You must be authenticated to access this route')).

O que é um router em Express?

Agora que está um pouco mais familiarizado com rotas, como é que isso é diferente de um router? Pode pensar num router como um conjunto de rotas. Esta pode ser uma forma útil de organizar diferentes secções da sua aplicação.

Quando se usa um router, pode-se pensar em termos de um caminho de raiz, mesmo que se vá usar esse router de algum subcaminho. Por exemplo, digamos que tem uma API para gerir mensagens. Pode ter um router com um caminho '/' a GET todas as mensagens ou POST uma nova mensagem. Pode ter outro caminho '/:id' a GET ou PUT (editar) uma mensagem específica.

Criar uma aplicação simples com um router em nó com Express

b>b>b>bastante conversa já… vamos a um código real. Para começar, crie uma pasta que aloje todo o seu código. Depois crie uma pasta para ajudar a gerir as dependências. Pode usar npm init para o fazer. Também precisará de instalar Express.

mkdir my-first-routercd my-first-routernpm init -ynpm install [email protected] [email protected]

criar um ficheiro index.js com o seguinte código:

index.js

Isto diz ao Express para usar o Handlebars (hbs) como um motor de visualização. Utiliza o Node’s incorporado path para lhe dizer o directório contendo as vistas. O / caminho é dito para renderizar a página usando index.hbs, que colocará a etiqueta content num parágrafo (p).

Para garantir que o Express tem modelos a renderizar, criar uma nova pasta chamada views, depois criar um novo ficheiro ali chamado layout.hbs. Quando diz ao Express para renderizar uma vista, primeiro renderizará layout.hbs e colocará o conteúdo da vista dentro da tag {{{body}}}. Isto permite-lhe configurar um esqueleto para a aplicação. Aqui está algum HTML básico usando Bootstrap que lhe dará algum estilo agradável sem necessidade de escrever qualquer CSS. Isto também irá tornar o title passado para o contexto no seu / route.

views/layout.hbs

também terá de criar um index.hbs view que será realmente básico por agora:

views/index.hbs

<p>{{content}}</p>

Para tornar o desenvolvimento um pouco mais fácil, pode instalar nodemon com:

npm install --save-dev [email protected]

Então modifique o seu ficheiro para que o ficheiro "scripts" inclua um script de início com nodemon .. Isto fará com que possa simplesmente executar npm start e o seu servidor reiniciará automaticamente sempre que fizer alterações:

"scripts": { "start": "nodemon ."}

Agora no seu terminal, se escrever npm start irá iniciar o servidor. Pode então ir a para ver a aplicação a correr.

Criar um Router no Express

Bem, isso é um pouco aborrecido. Que tal fazê-lo fazer algo de útil? Vamos criar uma lista simples de coisas a fazer. Comecemos por criar um router para gerir uma lista de itens. Faça um novo ficheiro chamado todo.js:

todo.js

Aqui tem dois roteadores de rotas. O primeiro ouve para POST pedidos (assinalado por router.post). Irá substituir a lista de afazeres por uma cópia do que quer que receba do formulário. Se o formulário contiver o remove propriedade (contendo um índice), utilizará splice para remover o elemento desse índice. Se o formulário contiver a propriedade new, um novo item será empurrado para a matriz. Depois de ter modificado a lista de tarefas, chama next() para passar ao próximo manipulador de rotas.

O segundo manipulador de rotas é sempre utilizado (assinalado por router.use). O seu único objectivo é apresentar a lista de afazeres. Ao separar as rotas desta forma, pode-se facilmente fazer sempre uma coisa, e outra apenas em determinadas circunstâncias (neste caso num POST pedido).

Para dizer ao aplicativo que utilize este router, terá de adicionar algumas linhas a index.js:

index.js

agora para o modelo todo. É um pouco maior, por isso guardei-o para o fim. Se está familiarizado com HTML, não deve ser muito mau segui-lo. O Handlebars acrescenta algumas características que lhe permitem aceder a variáveis. Neste caso, está a usar um {{#if}} bloco para renderizar algo especial se não houver itens, bem como um {{#each}} bloco para renderizar cada um dos itens da lista com uma marcação mínima.

O único JavaScript usado aqui é para submeter automaticamente o formulário quando se altera algo. Se o JavaScript estivesse desactivado, isto ainda funcionaria ao premir a tecla “Enter” no seu teclado, graças ao botão oculto rotulado “Autosave”.

views/todo.hbs

Agora vá para e introduza alguns itens na sua lista completa.

Adicionar autenticação de utilizador no nó

Agora tem uma lista funcional de afazeres. No entanto, talvez tenha notado que isto só funcionaria se quisesse que todos os que a utilizassem partilhassem a mesma lista. Se adicionar autenticação, pode ter uma lista de afazeres separada para cada utilizador.

Adicionar utilizadores não tem de ser um incómodo. De facto, pode ser feito de forma muito simples com o Okta. O que é o Okta?, pode perguntar. Okta é um serviço em nuvem que permite aos programadores criar, editar, e armazenar com segurança contas de utilizadores e dados de contas de utilizadores, e ligá-los a uma ou várias aplicações.

Se ainda não tiver uma, inscreva-se para uma conta de programador para sempre livre.

Vai precisar de guardar alguma informação para usar na aplicação. Crie um novo ficheiro chamado .env. Nele, introduza a URL.

HOST_URL=http://localhost:3000OKTA_ORG_URL=https://{yourOktaOrgUrl}

>p>Vai precisar também de uma cadeia aleatória para usar como segredo de aplicação para sessões. Pode gerar isto com os seguintes comandos:

echo -e "\nAPP_SECRET=`npx -q uuid`" >> .env

Next, inicie sessão na sua consola de desenvolvimento, navegue para Aplicações, depois clique em Adicionar Aplicação. Seleccione Web, depois clique em Next. Dê um nome à sua aplicação, como “O Meu Primeiro Roteador”. Altere o URI base para e o Login redirecciona o URI para , depois clique em Done

Click Edit e adicione um URI de , depois clique em Save.

A página a que chega após criar uma aplicação tem mais algumas informações que precisa de guardar no seu ficheiro .env. Copie no ID do cliente e no segredo do cliente.

OKTA_CLIENT_ID={yourClientId}OKTA_CLIENT_SECRET={yourClientSecret}

Agora de volta ao código. Será necessário adicionar o middleware OIDC do Okta para controlar a autenticação. Também depende da utilização de sessões. Terá de usar dotenv para ler em variáveis do ficheiro .env. Para instalar as dependências de que necessitará, execute este comando:

npm install @okta/[email protected] [email protected] [email protected]

Agora modifique o seu index.js ficheiro. Aqui irá adicionar a sessão e os middlewares OIDC, e um logout rota para que os utilizadores possam sair da aplicação. Estará também a adicionar um middleware especificamente ao todoRouterapp.use('/todo', oidc.ensureAuthenticated(), todoRouter)). Ao adicionar oidc.ensureAuthenticated(), está a deixar o Okta certificar-se de que a rota não pode ser alcançada a menos que um utilizador esteja logado. Se o utilizador não estiver ligado e tentar chegar a essa rota, será levado a um sítio seguro para se ligar, e redireccionado de volta ao seu sítio depois.

index.js

Para tornar as coisas um pouco mais fáceis quando um utilizador sai, adicione um link à lista de afazeres a partir da página inicial.

views/index.hbs

<p>{{content}}</p><a href="/todo">Go to To-Do List</a>

P>P>Pode também adicionar uma mensagem de boas-vindas e um botão de log out ao seu layout.hbs.

views/layout.hbs

Para que isso funcione, terá de adicionar userinfo ao contexto ao renderizar vistas.

todo.js

index.js

OK, por isso agora está a exigir que os utilizadores façam login antes de poderem editar a lista de afazeres, mas continua a ser uma lista única e partilhada. A fim de a dividir numa lista separada para cada utilizador, faça outra pequena alteração a todo.js.

todo.js

Saiba mais sobre Node, Express, and Secure Web Development

P>Agora que tenha uma lista de afazeres totalmente funcional, encorajo-o a expandi-la. Tente armazenar os dados numa base de dados, ou mesmo deixe que o Okta os armazene para si! Veja se pode criar mais alguns routers para adicionar ao servidor web.

Se quiser ver a amostra final de código, pode encontrá-la em GitHub.

Se quiser saber mais sobre Node e Express veja alguns destes outros artigos no blog do desenvolvedor Okta:

• Build and Understand Express Middleware através de Exemplos
• Build and Understand a Simple Node.js Website com Autenticação de Utilizador

li>Build a Simple REST API with Node and OAuth 2.0li>Build Secure Node Authentication with Passport.js and OpenID Connectli>Secure a Node API with OAuth 2.0 Client Credentials/ul>