Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Manipulando rotas no client side com vanilla js

Estou tentando fazer um sistema de autenticação simples usando JWT e Node. Por enquanto está tudo indo bem, mas tentando entender melhor o tratamento no client side encontrei alguns obstáculos.

Não sei como, após obter o token, usar o redirect - ou algo similar - para acessar as rotas privadas da aplicação. Na verdade, gostaria de entender como funcionaria um sistema de rotas usando o js puro!

Aqui vai um exemplo do que eu estou fazendo por agora:

SERVER SIDE

server.js

    app.get('/',  (req, res) =>{
        return res.sendFile(path.resolve(__dirname, ' ../public', 'index.html');
    });

    app.use('/auth', authRoute); // Rotas que fazem a autenticação/criação de usuarios

    app.get('/dashboard', authMiddleware, (req, res) => {
        return res.sendFile(path.resolve(__dirname, '../public', 'dashboard.html');
    });
...
...
    //auth middleware
    module.exports = async (req, res, next) => {

        const authHeader = req.headers.authorization;

          if (!authHeader) {
               return res.status(401).send({ error: "No token provided" });
        }

         const [scheme, token] = authHeader.split(" ");

          try {
                const decoded = await promisify(jwt.verify)(token, "secret");

                req.userId = decoded.id;

               return next();
         } catch (err) {
                   return res.status(401).send({ error: "Token invalid" });
        }
          return res.sendStatus(200);
};

CLIENT SIDE

index.js

let token = '';

let submitButton = document.getElementById("submit");

submitButton.addEventListener("click", (event) => {
    event.preventDefault();

    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;

    login(email, password);
});

function login(email, password){

    postData("http://localhost:3000/auth/authentication", { email, password })
    .then(res => {
        token = res.token;
        console.log(token);
    })
    .catch(e => console.log(`Erro: ${e}`));

    getData('http://localhost:3000/dashboard')
        .then(res => console.log(res));
}

async function postData(url = ''){

    const response = await fetch(url,{
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        //mode: 'cors', // no-cors, *cors, same-origin
        //cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        //credentials: 'same-origin', // include, *same-origin, omit
        headers: {
          'Content-Type': 'application/json'
          // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        //referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
        body: JSON.stringify(data) // body data type must match "Content-Type" header
    });

    return response.json();
}

async function getData(url = '', headers){
    const response = await fetch(url,{
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        credentials: 'same-origin', // include, *same-origin, omit
        headers:{
            'Authorization': token
        },
        redirect: 'follow', // manual, *follow, error
    });

    return response;
}

O problema é que logo após fazer a requisção get com o header Authentication setado com o Bearer + token, eu não sei como renderizar o conteúdo html que o server envia de volta.

1 resposta
solução!

Fala ai Gabriel, tudo bem? Realmente, trabalhar com sistemas de roteamento na mão é algo bem complexo e burocrático.

No seu exemplo, assim que receber a requisição com o token você pode fazer um redirect para a rota base privada, podendo usar o history.push.

Um outro exemplo é você criar um sistema de eventos onde você vai disparando eventos e esses eventos vão mudando e reagindo a página.

Explicar é bem chato, porque é algo um pouco mais complexo e avançado.

Dá uma olhada nesse artigo: https://medium.com/javascript-by-doing/create-a-modern-javascript-router-805fc14d084d, achei bem legal.

Espero ter ajudado.