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.