我正在使用 React 和 Express 創建一個身份驗證頁面。我也在使用智威湯遜。
我在后面做了這條路線:
服務器.js
...
app.use(
cookieSession({
name: "prode_session",
secret: "MIOURI_PRODE_SECRET", //add to .env variable
httpOnly: false,
})
);
app.use(cors());
...
auth.routes.js
app.post("/signin", controller.signin);
user.routes.js
app.get(
"/user",
[authJwt.verifyToken],
(req, res) => res.send(true)
)
auth.controller.js
exports.signin = async (req, res) => {
const user = await Users.findOne({
where: { email: req.body.email },
});
try {
if (!user) {
return res.status(404).send({ message: "User Not found." });
}
const passwordIsValid = bcrypt.compareSync(
req.body.password,
user.password
);
if (!passwordIsValid) {
return res.status(401).send({
message: "Invalid Password!",
});
}
const token = jwt.sign({ id: user.id }, config.secret, {
expiresIn: 84000, //24hours
});
req.session.token = token;
console.log(req.session);
return res.status(200).send({
isLogged: true,
id: user.id,
email: user.email,
suscripcion: user.suscripcion,
preference_id: user.preference_id,
token,
});
} catch (error) {
console.log(error);
}
};
authJWT.js
verifyToken = async (req, res, next) => {
let token = req.session.token;
console.log(`THIS IS THE TOKEN: ${token}`);
if (!token) {
return res.status(403).send({
message: "No token provided",
});
}
jwt.verify(token, config.secret, (err, decoded) => {
if (err) {
console.log(err);
return res.status(401).send({
message: "Unauthorized!",
});
}
req.id = decoded.id;
next();
});
};
const authJwt = { verifyToken };
module.exports = authJwt;
當我用 POSTMAN 測驗它時,它可以正常作業,我的意思是,如果我首先嘗試發出 GET 請求,回應是“沒有提供令牌”,但如果我先登錄,生成令牌然后發出 GET 請求,我變得真實。
問題是當我嘗試在前面實作它時。
我在 React 中有這個 Login 組件,我在其中使用憑據發出 POST 請求:
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await fetch("http://localhost:3000/signin", {
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
body: JSON.stringify({
email,
password,
}),
});
const data = await response.json();
console.log(data);
if (data.isLogged && data.suscripcion === true && data.token) {
await tokenAvailable()
//navigate(`/masthead/${email}&${data.isLogged}&${data.id}`);
} else if (data.isLogged && data.suscripcion === false) {
navigate("/suscripcion", {
state: { preference_id: data.preference_id },
});
} else {
window.alert("Invalid Login");
}
} catch (error) {
console.log(error);
}
};
async function tokenAvailable() {
const user = await fetch("http://localhost:3000/user", {
method: "GET",
mode: "cors",
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
},
});
const response = await user.json();
setUser(await response);
console.log(await response);
return response;
}
當我進行 POST 時,在收到回應后執行 GET 請求(tokenAvailable 函式),但是我收到“沒有提供令牌”,而我希望像在 Postman 中一樣收到“真”。
根據我的除錯,authJWT.js 檔案沒有從 req.session.token 接收任何內容。當我比較郵遞員和瀏覽器的標題時,在 postan 中出現了 SET-cookie 鍵,但在瀏覽器中沒有。
郵差:
瀏覽器:
我需要一些幫助。我已經為此苦苦掙扎了將近 3 天。
uj5u.com熱心網友回復:
我找到了解決方案。顯然,HttpOnly
如果 React 應用程式和后端服務器托管在同一域中,則 Cookie 方法有效。所以我們需要http-proxy-middleware
用于本地開發。
我嘗試安裝 http-proxy-middleware 但出現了很多錯誤,所以我決定將 de JWT 存盤在本地存盤中。
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/497303.html
上一篇:在Laravel中推入會話問題