我目前正在尝试使用 React 客户端设置 Node/Express 应用程序以与之交互。我设置了护照来处理 JWT 身份验证。当用户登录时,我验证电子邮件/密码。然后我设置cookie:
res.cookie('jwt', token, { httpOnly: true, secure: false });
我看到令牌在响应标头中传回,但是当我在开发人员工具 > 应用程序 > Cookie 下检查 Chrome 浏览器的 cookie 时,我看到一个空 cookie。我做错了什么以及如何在后续请求的响应标头中发送 jwt?
服务器/App.js
const app = express()
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.post('/login', (req, res) => {
passport.authenticate('local', { session: false }, (error, user) => {
if (error || !user) {
res.status(400).json({ error });
}
// Construct JWT payload
const payload = {
email: user.email,
expires: Date.now() + parseInt(process.env.JWT_EXPIRATION_MS),
};
// Assign payload to req.user
req.login(payload, {session: false}, (error) => {
if (error) {
res.status(400).send({ error });
}
// Generate a signed JWT
const token = jwt.sign(JSON.stringify(payload), process.env.JWT_SECRET);
// Assign JWT to cookie
res.cookie('jwt', token, { httpOnly: true, secure: false });
res.status(200).send({ email: user.email });
});
})(req, res);
});
客户端/LoginModal.js
handleLogin = async () => {
const { name, email, password } = this.state
try{
const res = await axios.post('http://localhost:8080/login', {
email: email,
password: password,
})
if(res.status == 200){
console.log("Logged in")
console.log(res)
}
} catch (err) {
console.log(err)
}
}
编辑:我当前的解决方法是将令牌作为有效负载的一部分发送。然后,我的 React 客户端从有效负载中获取令牌并将其存储在浏览器的 cookie 中。有没有办法避免这种解决方法(例如见下文)?
server
res.status(200).send({ email: user.email, jwt: token });
client
if(res.status == 200){
cookies.set('jwt', res.data.jwt)
cookies.set('email', res.data.email)
}