#node.js #reactjs #express #cookies #jwt
Вопрос:
После долгих исследований я все еще не мог понять проблему. Так что, может быть, кто-нибудь из вас сможет помочь. Я разрабатываю приложение с использованием React и node(express) и пытаюсь использовать jwt для аутентификации
Вещи, которые вы должны знать:
1 — Мой API находится на локальном хосте:3000, приложение React работает на локальном хосте:3001
2 — Я сохраняю jwt в файле cookie HttpOnly и отправляю его на интерфейс
//express api
const app = express()
app.use(express.json());
app.use(cookieParser());
app.use(cors({
origin: 'http://localhost:3001',
credentials: true
}));
//in login route
db.get('users').findOne({email: email})
.then(user => {
const token = jsonwebtoken.sign({id: user._id}, 'privateKey', { expiresIn: 300});
res.cookie('token', token, { httpOnly: true });
res.json({user: user})
3 — В React я установил прокси-сервер на адрес API в package.json:
//package.json
"proxy": "http://localhost:3000"
я получаю эти заголовки ответов при входе в систему
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3001
Connection: keep-alive
Content-Length: 185
Content-Type: application/json; charset=utf-8
Date: Thu, 05 Aug 2021 21:10:51 GMT
ETag: W/"b9-zncj/54sydwZElLyuciFm6QMQEQ"
Keep-Alive: timeout=5
Set-Cookie: token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYwMzQwM2IyMzJiYjVhMDNjODE1ZWQ3MyIsImlhdCI6MTYyODE5Nzg1MSwiZXhwIjoxNjI4MTk4MTUxfQ.8SJ3u9HWFdPyJctxGGToNPu52OPkmYMd_kGIRbUKOdQ; Path=/; HttpOnly
Vary: Origin
X-Powered-By: Express
4 — и я хочу проверить jwt, когда пользователь пытается что-то опубликовать(сообщение в блоге)
запрос от REact выглядит так:
fetch("/post", {
method: "post",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({userId: userId, username:username, title: title, body: body, tags: tags }),
credentials: 'include'
})
5 — и я проверяю его в бэкэнде вот так:
const jsonwebtoken = require('jsonwebtoken');
jsonwebtoken.verify(req.cookies.token, 'privateKey', function(err, decoded) {
if(err){
res.json(err)
}else{
next();
}
В качестве ответа на req из браузера я получаю это:
{"name":"JsonWebTokenError","message":"jwt must be provided"}
Мне кажется, что я упускаю что — то маленькое, но я не знаю. Это мой первый раз, когда я использую файлы cookie. Любая помощь будет оценена по достоинству.
Комментарии:
1. если вы консолируете объект req непосредственно перед кодом подтверждения, видите ли вы маркер в списке?
2. @proxim0 я попадаю
cookies: [Object: null prototype] {}
в req
Ответ №1:
Понял это. Моя ошибка заключалась в том, что, когда я отправлял запрос на вход с интерфейса, я не установил учетные данные для «включения» для выборки:
fetch("http://localhost:3000/login", {
method: "post",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({email: email, password: password}),
credentials: 'include' //this part was missing
})
это маршрут, по которому я создаю свой токен, поэтому, поскольку в то время в браузере не было учетных данных, я не думал, что они мне понадобятся. по-видимому, это означает включать учетные данные в обоих направлениях 😀