cookie 中的访问令牌，但验证无法在 react.js(axios) 中检测到它，在邮递员中工作

Posted 2023-03-10

【中文标题】cookie 中的访问令牌，但验证无法在 react.js(axios) 中检测到它，在邮递员中工作

【英文标题】：Access token in cookies but validation can't detect it in react.js(axios), works in postman

【发布时间】：2021-08-25 04:08:45

【问题描述】：

所以我做了一个登录函数，它在 cookie 中生成一个访问令牌。但是当我对页面进行验证时，该页面没有检测到 cookie，在邮递员中它可以工作，但在反应中却没有。

这是我的代码，如果我的解释有点混乱，请见谅。

jwt.js 文件

const  sign, verify  = require('jsonwebtoken');

const createTokens = (user) => 
    const accessToken = sign(
         username: user.username, id: user.user_id , 
        'secret'
    );
    return accessToken;
;

const validateToken = (req, res, next) => 
    const accessToken = req.cookies['access-token']

    if (!accessToken) 
        return res.status(400).json(error: 'User not authenticated!')

    try 
         const validToken = verify(accessToken, 'secret')
         req.user = validToken;
         if(validToken) 
            req.authenticated = true
            return next();
         
     catch(err) 
        console.log(req.cookies);
        return res.status(400).json(error: err)
    
;

module.exports =  createTokens, validateToken ;

users.js 的路由

const express = require('express');
const router = express.Router();
const  Users  = require('../models');
const bcrypt = require('bcrypt');

const  createTokens, validateToken  = require('../controllers/jwt');

router.get('/', validateToken, async (req, res) => 
    const userList = await Users.findAll()
    res.json(userList);
);

router.get('/:id', validateToken, async (req, res) => 
    const id = req.params.id
    const user = await Users.findByPk(id);
    res.json(user);
);

router.post('/', validateToken, async (req, res) => 
    const  username, 
            email, 
            password, 
            first_name,
            last_name  = req.body;
    bcrypt.hash(password, 10).then((hash) => 
        Users.create(
            username: username,
            email: email,
            password: hash,
            first_name: first_name,
            last_name: last_name
        );
        res.json('User successfully added')
    );
);

router.post('/login', async (req, res) => 
    const  username, password  = req.body;

    const user = await Users.findOne( where: username: username);

    if(!user) res.status(400).json(error: `Username does not exist!`);

    bcrypt.compare(password, user.password).then((match) => 
        if(!match) res.status(400).json(error: 'Wrong password!')

        const accessToken = createTokens(user);

        res.cookie('access-token', accessToken, 
            maxAge: 60*60*24*30*1000, //30 days
            secure: process.env.NODE_ENV === 'production' ? true : false,
            httpOnly: process.env.NODE_ENV === 'production' ? true : false,
            sameSite: 'strict',
            path: '/'
        );

        user.password = undefined;

        res.json(accessToken);
    )
);

module.exports = router;

这是我在没有 validateToken 的情况下如何称呼它，我错过了什么？哈哈。现在真的很迷茫。

    const [ usersList, setUsersList ] = useState ([]);

    useEffect(() => 
      axios.get('http://localhost:4000/users').then((res) => 
        setUsersList(res.data)
      )
    , []);

【问题讨论】：

获取所有用户时是否已经登录？

登录后我可以使用邮递员获取所有用户，否则如果我不先登录，它会给出“用户未通过身份验证”。我的问题是我对如何从 cookie 中获取访问令牌并让页面知道我已通过身份验证来查看它感到困惑。（对不起，如果它令人困惑）

我的意思是在 reactjs 上

是的，我已经登录了，登录后我可以看到 cookie 有我的访问令牌，即使我导航到另一个页面，带有令牌的 cookie 也在那里。

【参考方案1】：

确保在使用 axios 调用端点时发送凭据。请参阅此答案：https://***.com/a/43178070/1712294 以检查如何操作。

【讨论】：

@madmeatballs，如果这对您有帮助，您可以接受答案，以便其他人知道问题已解决。