Estoy tratando de mantener a un usuario actualmente conectado en la actualización a través de la autenticación del lado del servidor. Estoy usando la función UseEffect() para hacer esto en la que verifico al actualizar. Mi problema es que cada vez que actualizo, mi servidor lee y apaga una sesión de usuario. Lo que significa que una actualización no leerá ninguna sesión, mientras que la otra actualización leerá una sesión de usuario, y así sucesivamente. Quiero que mi app.js siempre lea el código para leer siempre 'auth: true' suponiendo que el usuario haya iniciado sesión.
Lado del servidor:
índice.js
app.use(express.json()); //Parsing Json app.use(cors({ //Parsing origin of the front-end origin: ["http://localhost:3000"], methods: ["GET", "POST"], credentials: true //Allows cookies to be enabled })); app.use(cookieParser()); app.use(bodyParser.urlencoded({ extended: true })); app.use( session({ key: "userID", secret: "subscribe", //Normally this has to be long and complex for security resave: false, saveUninitialized: false, cookie: { //How long will the cookie live for? expires: 60 * 60 * 1000, //Expires after one hour } })); app.post('/isUserAuth', (req, res) => { //Where we Authenticate session const token = req.body.token; jwt.verify(token, "jwtSecret", (err, decoded) => { if (err) { res.send({auth: false, user: "No valid token!"}); } else if (!req.session.user) { res.send({auth: false, user: "empty user"}); console.log(req.session.user) } else { //Else if user is verified, we send confirmed authentication and user data res.send({auth: true, user: req.session.user}); console.log(req.session.user) } }) });Lado del cliente:
aplicación.js
const userAuthToken = localStorage.getItem('token'); useEffect(() => { //Stay logged in, if user is logged in, after refresh Axios.post("http://localhost:3001/isUserAuth", { //End-point for creation request token: userAuthToken }).then(response => { if (!response.data.auth) { //checking for auth status setAuthStatus(false); //User isnt logged in! console.log("NOT LOGGED IN!"); console.log(response.data.user); } else { setAuthStatus(true); //User is logged into session! console.log("LOGGED IN!"); console.log(response.data.user); } }) } ,[]);El problema aquí es que no envía credenciales del cliente a través de la solicitud de Axios. Dado que su aplicación de servidor tiene credenciales: cierto, debe hacer lo mismo en el cliente.
Mi sugerencia es agregar {withCredentials: true} a su Hook en el cliente.
useEffect(() => { const token = localStorage.getItem('token'); Axios.post("http://localhost:3001/isUserAuth", { token: token, },{withCredentials: true} /*<<Insert this*/).then(response => { if (!response.data.auth) { setAuthStatus(false); console.log("NOT LOGGED IN!"); console.log(response.data.user); } else { setAuthStatus(true); console.log("LOGGED IN!"); console.log(response.data.user); } }) } ,[]);Esto se debe a que su token de usuario no está definido en la recarga. Consulte esta pregunta relacionada sobre la obtención permanente de tokens del almacenamiento local .