[英]handling jwt token through express returns error "const token = req.cookies.auth; [0] ^ [0] [0] ReferenceError: req is not defined"
[英]req.cookies.token is undefined in express js (MERN stack)
我正在使用一个中间件,我必须检查用户是否经过身份验证,但是当我在前端已经有一个 cookie 时,我无法从 react to express js 中获取 cookie,如下图所示:
这是我的快递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!!");
})
在这里,我在身份验证中间件中有代码
const authenticate = async (req, res, next) => {
console.log(req.cookies["token"])
next();
}
预期的代码应该在控制台中记录token
cookie。 但是我在 express js 控制台中有 undefined 像这样!
下面给大家看一下前端代码
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 (
<>
...///
</>
)
}
你不能用这种方式处理,因为当我们使用 Express 和 React 或任何其他前端和后端分开工作的应用程序时,我们会将身份验证令牌存储在本地存储中。 请看下面的例子:
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!!");
})
身份验证中间件:
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)
}
}
}
在前端(React 应用程序)中,我们将令牌存储在本地存储中以持久保存,当用户刷新页面时,它不会更改/删除,直到您自己删除令牌。 反应应用程序代码:
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 (
<>
...///
</>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.