Agora que concluímos
a implementação do servidor REST API usando Express e MongoDB neste curso,
o próximo pensamento imediato que pode ocorrer em sua mente é,
uma vez que já desenvolvemos os aplicativos cliente nos cursos anteriores,
como integramos os dois juntos para que o nosso é capaz de
interagir com o servidor API REST completo que desenvolvemos neste curso?
Então, isto é o que vamos examinar
nesta palestra e os dois exercícios que se seguem a esta palestra.
Então, no final desta lição,
você terá React Client que
poderá se comunicar com o servidor que você acabou de desenvolver
neste curso e ser capaz de suportar
a visão completa do lado do cliente de toda a nossa aplicação.
Assim, vamos ver que desenvolvemos
o
aplicativo completo de ponta a ponta do lado do cliente todo o caminho para o lado do servidor neste curso.
Para integrar o cliente e o servidor,
como percebemos que nosso servidor já está
implementado para suportar a API REST completa.
Do lado do nosso cliente,
seja o cliente angular,
o cliente iônico ou o cliente de script nativo,
todos eles interagem com o servidor usando os endpoints da API REST.
Assim, quando o cliente envia a solicitação para o servidor no ponto final da API REST,
o servidor responderá com os dados JSON correspondentes de volta ao cliente.
O cliente pode então fazer uso dos dados JSON para renderizar as exibições para o usuário.
Assim, dado este entendimento da comunicação entre o cliente e o servidor,
a integração deve ser bastante simples.
Agora que temos a autenticação do usuário embutida em nosso lado do servidor,
precisamos atualizar nossos aplicativos cliente para
habilitá-los a fazer autenticação do usuário no lado do servidor,
postando as informações de login para o servidor e, em seguida,
obtendo o token de autenticação
do lado do servidor e, posteriormente, comunicando-se com o servidor
, incluindo o token de autenticação no cabeçalho das mensagens de solicitação.
Então, tudo isso significa que precisamos fazer pequenos ajustes tanto para
o cliente quanto para o servidor para que os dois possam se comunicar uns com os outros.
Um aspecto que eu não lidei anteriormente no exercício
é como o servidor irá lidar com os parâmetros de consulta que vêm do lado do cliente.
Então, como percebemos,
quando o lado do cliente envia um pedido para
um prato em destaque ou um líder em destaque ou uma promoção em destaque,
vimos que o URL inclui,
pratos recurso de ponto de interrogação é igual a
verdadeiro na URL da solicitação que vem do lado do cliente.
Agora, nos dados do lado do servidor,
já vimos que o prato,
a promoção ou o líder inclui a bandeira em destaque já nos dados JSON.
Então, quando esta solicitação vem para o lado do servidor,
em seguida, o servidor deve ser capaz de extrair
este parâmetro de consulta a partir da solicitação de entrada e, em seguida,
fazer adequadamente a consulta
do MongoDB e, em seguida, obter apenas os resultados onde este sinalizador de destaque é definido como true.
Então, para fazer isso como vimos,
o URL que é usado para enviar a solicitação para o servidor é,
barra pratos ponto de interrogação em destaque é igual a true.
Então, é assim que vamos fornecer os parâmetros de consulta para o nosso lado do servidor.
Agora, além disso, quando esta informação é recebida no lado do servidor,
agora vimos que antes quando fizemos a solicitação get no lado do servidor,
nós simplesmente disse pratos encontrar e, em seguida, nós iria encontrar
todos os pratos e, em seguida, retorná-los quando
o pedido get é enviado para a barra rota do roteador prato .
A mesma lógica se aplica tanto ao roteador promocional quanto ao roteador líder.
Agora, quando você inclui um parâmetro de consulta como esse na URL,
como nosso servidor será capaz de extrair esse parâmetro de consulta?
Então, é aqui que,
quando a solicitação de entrada tem esse parâmetro de consulta anexado à URL de entrada,
o servidor express processará automaticamente isso e transformará isso em
um objeto JSON que é carregado em uma mensagem de solicitação que entra no lado do servidor.
Agora, isso está disponível no lado do servidor na forma de req.query.
Assim, quaisquer parâmetros de consulta que você incluir na URL serão transformados em
objetos JSON correspondentes com as informações definidas como
mostrado aqui e, em seguida, carregados no objeto request no lado do servidor.
Então, usando req.query no lado do servidor,
seremos capazes de obter esses parâmetros de consulta.
Então, quando você executa uma solicitação get no lado do servidor você diz
dishes.find e, em seguida, você incluir o req.query no achado lá.
Assim, quando o MongoDB é
consultado, em seguida, apenas esses registros ou apenas os documentos para os
quais o destaque é definido como verdadeiro será extraído do MongoDB e fornecido de volta para
nós dentro deste método get aqui e, em seguida, pode ser devolvido para o lado do cliente.
Então, isso é tão simples quanto isso em lidar com os parâmetros de consulta em nosso lado do servidor.
Então, esta atualização vamos fazer tanto para o roteador prato,
o roteador promocional e o roteador líder no nosso lado do servidor.
A próxima parte é,
claro, a Autenticação do Usuário.
Então, como percebemos,
no lado do servidor já temos
esses endpoints REST API que são úteis para Autenticação do Usuário,
em particular quando você faz um post para cortar usuários
barra login com o nome de usuário e senha,
então você será capaz de autenticar o usuário no servidor Lado.
Agora, quando o usuário é autenticado no lado do servidor com êxito,
a mensagem de resposta vinda do lado do servidor incluirá
o JSON Web Token no corpo da resposta da mensagem de resposta recebida do lado do servidor.
Então, no lado do cliente,
devemos ser capazes de extrair este token e, em seguida, usar este token posteriormente.
Assim, quando o cliente recebe a mensagem de resposta do
lado do servidor e o usuário é autenticado com êxito no lado do servidor,
a mensagem de resposta conterá o JSON Web Token,
que deve ser extraído,
e, posteriormente, o cliente deve incluir este token da Web JSON
no cabeçalho de autorização para cada solicitação de saída do lado do cliente.
Isso é feito salvando o JSON Web Token no armazenamento local.
Posteriormente, para cada solicitação de busca que emitimos,
podemos configurar o cabeçalho de autorização para conter o Token da Web JSON.
Agora, o processo de logout é bastante simples,
se destruirmos o JSON Web Token que temos no lado do cliente,
então o cliente não será mais capaz de acessar o servidor.
Então, é tão simples quanto destruir
o JSON Web Token no lado do cliente para fazer logout desse cliente.
Então, dado esse entendimento,
vamos ver as etapas que estão envolvidas em
fazer a autenticação do usuário no tratamento da autenticação do usuário no lado do cliente.
Então, para lidar com a autenticação do usuário no lado do cliente,
o cliente enviará uma solicitação de postagem para os usuários barra barra ponto final de login,
e o corpo da solicitação de postagem conterá o nome de usuário e senha.
Neste caso, estamos usando a autenticação de login.
Agora, para autenticação no Facebook, novamente,
essa é uma configuração diferente que eu não vou discutir agora.
Mas o corpo da solicitação como você vê para
autenticação local conterá o nome de usuário e a senha.
Assim, quando o usuário é autenticado com êxito no lado do servidor,
o servidor responderá de volta
ao cliente, incluindo o JSON Web Token na mensagem de resposta.
Então, quando o cliente recebe a mensagem de resposta do lado do servidor,
o cliente terá que capturar esse Token da Web JSON e,
em seguida, salvar o Token da Web JSON no armazenamento local no lado do cliente.
Posteriormente, o cliente deve incluir este token em cada solicitação de saída.
Então, como isso é feito no lado do cliente?
Em primeiro lugar, precisamos salvar o JSON Web Token no armazenamento local.
Agora, isso é feito dentro do criador de ação que lida com o processo de login do usuário.
Então, quando a postagem for feita no servidor do criador de indução do lado do cliente,
a mensagem de resposta conterá o token,
e esse token será salvo no criador da ação que lida com o processo de login do usuário.
Agora, depois disso, quando qualquer solicitação de busca é feito,
então podemos facilmente definir o cabeçalho de autorização na solicitação de busca de saída.
Agora, uma vez que o cliente logout,
o JSON Web Token será destruído no lado do cliente.
Então, depois disso, as solicitações de saída não conterão
mais o Token da Web JSON porque o Token da Web JSON não existe no lado do cliente.
Assim, o usuário perde a autenticação.
Então, é assim que vamos lidar com o login e o processo de logout no lado do cliente.
Comunicando com o servidor e, em seguida, obter o JSON Web Token e
, em seguida, incluindo o JSON Web Token em cada solicitação de saída.
Agora, com essa compreensão de como o cliente e o servidor irão interagir,
vamos agora prosseguir para os próximos dois exercícios.
Primeiro, vamos atualizar o lado do servidor com algumas adições para
que ele possa se integrar bem com o lado do nosso cliente.
Depois disso, atualizaremos o lado do cliente ou melhor, eu lhe darei
um aplicativo cliente de pleno direito que eu tirei
da força de reação anterior e adaptei, atualizei.
Então, vamos lidar com ambos nos próximos dois exercícios
e, no final, você entenderá como integrar o lado do cliente e do servidor.