我在MERN应用程序中使用JWT令牌进行身份验证。当我单击此端点"http://127.0.0.1:1000/api/v1/users/login"在邮差中登录用户和此端点"http://127.0.0.1:1000/api/v1/users/verify"为了验证用户的令牌,将返回该令牌。然而,当我在我的react前端应用程序中执行相同的操作时,令牌返回未定义。请问我做错了什么?这是我的React代码。注:令牌存储在cookie中。
function Welcome() {
const [user, setUser] = useState("");
const sendRequest = async () => {
const res = await axios
.get("http://127.0.0.1:1000/api/v1/users/verify", {
withCredentials: true,
})
.catch((err) => console.log(err));
const data = await res.data;
console.log("RESPONSE", data);
return data;
};
React.useEffect(() => {
sendRequest().then((data) => console.log(data));
}, []);
console.log(user);
return <div>Welcome</div>;
}
这是验证令牌代码在我的快递应用程序
exports.verifyToken = async (req, res, next) => {
const cookies = await req.headers.cookie;
const token = cookies.split("=")[1];
if (!token) {
res.status(404).json({ message: "no token found" });
}
jwt.verify(String(token), process.env.JWT_SECRET, (err, user) => {
if (err) {
return res.status(400).json({message: "Invalid token" });
}
req.id = user.id;
});
next();
};
用户cookie解析器
const express = require("express");
const app = express();
const cookieParser = require("cookie-parser");
app.use(express.json());
app.use(cookieParser());
app.get("/", (req, res) => {
res.setHeader("Set-Cookie", "name=langesh;SameSite=None;");
res.send("hello");
});
app.get("/get-cookie", (req, res) => {
res.send(req.cookies);
});
app.listen(9000);
{name : "langesh"}
我个人对axios
没有太多的经验,我更喜欢fetch()
的方法,它工作得很好。
也就是说,我认为这个问题可能会出现,因为令牌没有在请求中标识。尝试将headers: { Authorization: `Bearer ${token}`}
添加到get
方法中,看看是否固定。
axios.get("http://127.0.0.1:1000/api/v1/users/verify", {
headers: {
Authorization: `Bearer ${token}`
},
withCredentials: true,
})
如果将令牌参数httpOnly设置为True(由后端代码设置,如下所示),则前端javascript无法访问令牌,因为httpOnly标志阻止javascript访问cookie,从而使攻击者通过XSS访问JWT更具挑战性。
res.cookie('jwt',
accesstoken,
{
path: "/",
httpOnly: true,
secure: true,
sameSite: 'strict'
})
如果你想检查令牌是否有效,当用户在一个特定的页面上,然后采取必要的步骤,你可以发送一个请求来验证令牌到后端,因为任何来自网站的请求将包含存储在cookie中的令牌。如果后端响应令牌有效,则可以执行必要的步骤。
通过这样做,您将验证令牌的工作委托给后端。