Блог

Я пытаюсь передать токен, который проверяет, какой пользователь вошел в систему на HTML-страницах. После входа пользователя в систему создается токен, который содержит user _Id. Я хочу использовать эту информацию, чтобы получить имя пользователя и отобразить его на HTML-страницах.

/api/user/login

 router.post('/login', async (req, res) => {
    //Validate befor use
    const { error } = loginValidation(req.body);
    if (error) return res.status(400).send(error.details[0].message);

    const user = await User.findOne({ email: req.body.email });
    if (!user) return res.status(400).send('Email is not found');

    const validPass = await bcrypt.compare(req.body.password, user.password);
    if (!validPass) return res.status(400).send('Invalid pasword');

    //Create and assign a token
    const token = jwt.sign({ _id: user._id }, process.env.Token_SECRET);
    res.header('auth-token', token);
    if (!error) res.redirect('/public/index.html');
});
 

Проблема, с которой я сталкиваюсь, заключается в том, что после повторного перенаправления обратно в индекс я теряю токен. Я хочу иметь возможность передавать токен на другие HTML-страницы.

Я придумал несколько способов решения этой проблемы, но единственный способ, о котором я мог подумать, — создать другой файл маршрутов, чтобы я мог использовать

 router.get('/', verify, (req, res, next) => {
    res.send(req.user);
})
 

Но это возвращает к той же проблеме, что я не могу передать токен на другие HTML-страницы.

Одним из очень распространенных решений является сохранение токена на стороне клиента после входа пользователя в систему. Чтобы сохранить его на стороне клиента в 1 источнике, вы можете использовать localStorage .

 
localStorage.setItem('token', 'xxxxxxaaaaaaannnnnnnnccccc.asdaasdasdasdasd');
const token = localStorage.getItem('token');

 

В вашем маршруте входа в систему вам, очевидно, придется возвращать данные, а не перенаправлять. Итак, верните токен пользователю, и после того, как пользователь получит токен, сохраните его, localStorage а затем вы можете сделать перенаправление также на стороне клиента.

 // server
// after successful token create
res.status(200).json({ token : token });
 

 // client
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
 

Если новая страница находится в том же источнике, localStorage заданный вами по-прежнему доступен.

Я предполагаю, что у вас также есть контроль над интерфейсным приложением, если это так, я считаю, что один из способов — требовать токен для каждого запроса, который получает API, который классифицируется как «страница входа в сеанс», например: получить информацию из API, удалить учетную запись…

Для этого, как только вы отправляете в res токен, каждый раз, когда api получает запрос «необходимо войти в систему», вы можете добавить промежуточное программное обеспечение, используемое во всех запросах, требующих токена, что-то вроде этого:

     const jwt = require('jsonwebtoken');
    const authConfig = require('./auth.json');// defining a SecretKey for the authtoken
    
    
    module.exports = (req, res, next) => {
    const authHeader = req.headers.authorization;

    if (!authHeader) {
        return res.status(401).send({ error: 'No token provided' });
    }

    jwt.verify(token, authConfig.secret, (err, decoded) => { // here you verify the authtoken = key   token
        if (err) {
            return res.status(401).send({ error: 'Token invalid' });
        }
        return next();
    });
}
 

Что касается интерфейса, вам нужно будет локально сохранить предоставленный токен, возможно, в безопасных файлах cookie, как показано в документах MDN здесь, например:

 document.cookie='authToken=[token]'// where token is the value saved as a string
 

И в следующий раз, когда клиент переходит с запросом на страницу входа в систему, вы отправляете токен, сохраненный как cookie, например, в заголовке авторизации:

     myGETRequest = () => {
        const authToken = document.cookie.split('; ').find(row => row.startsWith('authToken'))
  .split('=')[1]; //all cookies are saved together in one string

        fetch(`http://yourURL`, {
            "method": "GET",
            "headers": {
                "authorization": authToken, 
                "Content-Type": "application/json"
            },
        })
            .then(res => {
                res.json().then(res => console.log(res))
            })
            .catch(err => {
                console.log(err)
            })
    }
 

Для получения дополнительной информации вы можете проверить документы W3schools о файлах cookie здесь или документы MDN здесь

Почему бы вам не прикрепить токен к URL-адресу перенаправления? JWT обычно имеет ограниченное время жизни. Тот, кто сможет получить доступ к вашему токену позже, не сможет его использовать.