我正在摆脱使用Firestore Auth的方式，以了解如何制作自己的身份验证系统。
我的目标：
- 创建一个React Web应用程序，让用户注册和登录。
- 经过身份验证的用户可以在RestAPI上操作，该API是NodeJS连接到Postgres。
我看过很多教程。其中大部分都谈到了express-session作为解决方案。然而，当我尝试时，这些会话cookie只在我的浏览器位于express uri上时才提供。
问题是...
在前端，当我通过fetch发送CRUD操作到我的express api时，我的react-app无法获取到那个cookie。
我所做的是处理与后端服务器身份验证的常规方式吗？我该如何修复这个问题？
EXPRESS:
require("dotenv").config();
const express = require("express");
const db = require("./db");
var session = require("express-session");
var pgSession = require("connect-pg-simple")(session);
const app = express(); //create an instance;
// :id url param.
app.use(
session({
store: new pgSession({ pool: db.pool }),
secret: "secret",
resave: false,
saveUninitialized: false,
cookie: { maxAge: 303 * 24 * 60 * 60 * 1000 }, //30days
})
);
app.use(function (req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, OPTIONS, PUT, PATCH, DELETE"
);
res.setHeader(
"Access-Control-Allow-Headers",
"Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers,X-Access-Token,XKey,Authorization"
);
next();
});
app.use(express.json());
app.post("/addUser", async (req, res) => {
try {
const results = await db.query(
"INSERT INTO USERS (email, password) values ($1, $2) returning *",
[req.body.email, req.body.password]
);
console.log(results);
req.session.isAuth = true;
res.status(201).json({
status: "success",
data: {
user: results.rows,
},
});
} catch (err) {
console.log(err);
}
});
ReactJS
import React, { useEffect, useState } from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect,
} from "react-router-dom";
const App = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [authenticated, setAuthenticated] = useState(false);
const onSubmit = (e) => {
e.preventDefault();
fetch("http://localhost:3006/addUser", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email: email, password: password }),
})
.then(function (response) {
return response.json();
})
.then((response) => {
console.log(response);
setAuthenticated(true);
})
.catch((err) => {
console.log(err);
});
};
return (
<Router>
<Switch>
<router path="/" exact>
<div>
<form onSubmit={(e) => onSubmit(e)}>
<label>email</label>
<input
name="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
></input>
<label>password</label>
<input
name="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
></input>
<input type="submit" value="submit"></input>
</form>
</div>
{authenticated ? <Redirect to="/auth" /> : null}
</router>
<Route path="/auth" exact>
Authenticated
</Route>
</Switch>
</Router>
);
};
export default App;
在React中-提交表单后，在devtools中看不到cookie。