Estou tentando importar a função 'gerarJWT' da pasta 'servidor > utils' do back dentro da pasta 'public > login' do front mas não está funcionando. O código de importação:
import gerarJWT from "../../servidor/utils/gerarJWT.js";
gera o erro:
GET http://localhost:3000/servidor/utils/gerarJWT.js net::ERR_ABORTED 404 (Not Found)
Alguém saberia me explicar o por quê?
Oi, Thiago, tudo bem? Nos desculpe a demora a responder.
O problema é que você está tentando importar um arquivo do back-end a partir do front-end. Mas, essencialmente, você não consegue fazer isso porque no arquivo servidor/servidor.js nós usamos esse código:
const caminhoAtual = url.fileURLToPath(import.meta.url);
const diretorioPublico = path.join(caminhoAtual, "../..", "public");
app.use(express.static(diretorioPublico));Essas linhas de código fazem a aplicação Express servir apenas a pasta public do nosso projeto. Ou seja, apenas o conteúdo dela está exposto para o Front-end e requisições HTTP. Dessa forma, para o Front-end, não existe mais nada além do que está na pasta public, então os arquivos do servidor também não estão disponíveis, gerando o erro 404 ao tentar acessá-los.
Caso você queira compartilhar um mesmo arquivo entre o servidor e o Front-end, uma forma de fazer isso seria criando uma pasta separada em seu projeto com os arquivos que você quer compartilhar. Em seguida, você também faria o Express servi-la com o método express.static.
Contudo, isso não seria uma boa prática. Normalmente não há motivos para o Front-end e o Back-end compartilharem de um mesmo código, além de que isso iria expor para o Front-end um código que é usado no servidor da sua aplicação. Além disso, nem sempre a versão do JavaScript (ECMAScript) utilizada no Front-end é compatível com a versão do Node no Back-end.
Partindo desse ponto, também podemos dizer que o Front-end não precisa gerar um token JWT, visto que isso é responsabilidade apenas do servidor.
Nos casos onde realmente é interessante compartilhar um mesmo código JavaScript entre o Front-end e o Back-end, a solução mais interessante é criar uma biblioteca, ou até mesmo utilizar alguma já existente que possa atender às suas necessidades, como realizar operações comuns com estruturas de dados do JS. Outro exemplo é a biblioteca aws-sdk, que permite que você se comunique com os serviços da AWS tanto pelo Front-end quanto pelo Back-end.
Espero ter ajudado! Abraços e bons estudos :)