0
264
Viewsreq.cookies.token no está definido en express js (pila MERN)
Estoy usando un middleware en el que tengo que verificar si el usuario está autenticado o no, pero no puedo obtener la cookie de reaccionar para expresar js cuando ya tengo una cookie en el front-end como se muestra en la imagen a continuación: 
Aquí está mi código express js
require("dotenv").config(); const port = process.env.PORT || 5050; const express = require("express"); const app = express(); const cors = require("cors"); const cookieParser = require("cookie-parser"); const mongoose = require("mongoose"); const { authenticate } = require("/controllers/user"); const Post = require("/models/post"); // mongodb connection app.use(cookieParser()); app.use(cors({ origin: 'http://localhost:3000', credentials: true })) app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.get("/api/post/:slug", authenticate , async (req, res) => { const slug = req.params.slug; const post = await Post.findOne({ slug }) res.send(post); }); app.listen(port, () => { console.log("Blog server is running!!"); })Aquí tengo el código en el middleware de autenticación.
const authenticate = async (req, res, next) => { console.log(req.cookies["token"]) next(); } El código esperado debería registrar la cookie del token en la consola. ¡Pero tengo undefined en la consola express js como este!
Déjame mostrarte el código front-end a continuación
import { useParams } from 'react-router-dom' export default function Post() { const [post, setPost] = useState([]); const loadPost = async () => { const { slug } = useParams(); const all_posts = await fetch(`http://localhost:5000/api/post/${slug}`) const res = await all_posts.json(); setPost([res]); } useEffect(() => { loadPost(); }, []) return ( <> .../// </> ) }1 answers
Answer question0
No puede manejarlo de esta manera, porque cuando trabajamos con Express y React o cualquier otra aplicación donde el frontend y el backend funcionan por separado, almacenamos el token de autenticación en el almacenamiento local. Por favor, mire el siguiente ejemplo:
require("dotenv").config(); const port = process.env.PORT || 5050; const express = require("express"); const app = express(); const cors = require("cors"); const mongoose = require("mongoose"); const { authenticate } = require("/controllers/user"); const Post = require("/models/post"); // mongodb connection app.use(cors({ origin: 'http://localhost:3000', credentials: true })) app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.get("/api/post/:slug", authenticate , async (req, res) => { const slug = req.params.slug; const post = await Post.findOne({ slug }) res.send(post); }); app.listen(port, () => { console.log("Blog server is running!!"); })Middleware de autenticación:
const jwt = require('jsonwebtoken') module.exports = { authenticate: async (req, res, next) => { try { const { token } = req.headers if (!token) return helper.apiResponse(req, res, 'UNAUTHORIZED', true, null, 'Expected a bearer token') const [authType, auth] = token.trim().split(' ') if (authType !== 'Bearer') return helper.apiResponse(req, res, 'UNAUTHORIZED', true, null, 'Expected a bearer token') jwt.verify(auth, process.env.TOKEN_SECRET, function (err, decoded) { if (err) return helper.apiResponse(req, res, 'UNAUTHORIZED', true, null, err, true) if (decoded.loggedInUser) { req.user = decoded.loggedInUser next() } else { return helper.apiResponse(req, res, 'UNAUTHORIZED', true, null, 'Invalid Token') } }) } catch (error) { return helper.apiResponse(req, res, 'UNAUTHORIZED', true, null, error, true) } } }Y en Frontend (aplicación React) almacenaremos el token en el almacenamiento local para que persista, cuando el usuario actualice la página, no cambiará/eliminará hasta que usted mismo elimine el token. Reaccionar código de aplicación:
import { useParams } from 'react-router-dom' export default function Post() { const [post, setPost] = useState([]); const token = localstorage.getItem('token') const loadPost = async () => { const { slug } = useParams(); const all_posts = await fetch(`http://localhost:5000/api/post/${slug}`,{ headers: new Headers({ 'token': token, 'Content-Type': 'application/x-www-form-urlencoded' } }) const res = await all_posts.json(); setPost([res]); } useEffect(() => { loadPost(); }, []) return ( <> .../// </> ) }