Как сохранить jsonwebtoken на cook ie для front-end, чтобы клиент мог отправить токен обратно для аутентификации - PullRequest
Новая
       16

Как сохранить jsonwebtoken на cook ie для front-end, чтобы клиент мог отправить токен обратно для аутентификации

1 голос
/ 19 апреля 2020

Я изо всех сил пытался сделать это около 6 дней ... Все отлично работает, например, авторизация, но у меня возникла одна проблема - аутентификация.

В моей модели пользователя (для создания схемы базы данных ) У меня есть способ сгенерировать токен для зарегистрированных пользователей или зарегистрированных. 

userSchema.methods.generateAuthToken = function(){
    const token = jwt.sign({ _id: this._id }, config.get('jwtPrivateKey'));
    return token;
}

Поэтому, когда пользователь публикует в / login, сервер отвечает токеном: 

router.post('/', async (req, res) =>{
    // Here i'm validating data and then if everything is right the code under will run.
    console.log('logged in as: ' + user.username);
    // Here i'm using the function to generateAuthToken().
    const token = user.generateAuthToken();
    console.log("Token from server: " + token);
    // now here is my main problem i would like to use cookies to store it for an hour or so.
    // then client can send it back to server for protected route.
    res.status(200).send(token);
});

Я сделал функцию промежуточного программного обеспечения для аутентификации (чтобы проверить токен, если вы проходите через защищенный маршрут) 

module.exports = function (req, res, next){
    // instead of using headers i would like to check for the cookie value if it's the token,
    // pass the user in, else Access denied.
    // I have no idea how to use cookie parser with middleware functions.
    const token = req.header('x-auth-token');
    if(!token) return res.status(401).send('Access denied. Sign in or register.');

    try{
        const decoded = jwt.verify(token, config.get('jwtPrivateKey'));
        req.user = decoded;
        next();
    }
    catch(err){
        res.status(400).send('Invalid Token!');
    }
}

здесь я использую функцию промежуточного программного обеспечения аутентификации: 

const express = require('express');
const router = express.Router();
const auth = require('../middleware/auth');

// but it's actually not passing the user in since i haven't done it with cookies.
router.get('/', auth, (req, res) =>{
    res.render('index', {});
});

Я знаю, что могу сделать это с помощью localStorage, но это ужасная практика, и было бы лучше хранить ее на куки, чтобы никто не мог взломать. Есть ли хороший подход для решения этой проблемы? Я вроде как потерял и потерял надежду go вернуться к sessionID (чего я не хочу :().

1 Ответ

0 голосов
/ 19 апреля 2020

После того, как вы запросите интерфейс, вам нужно получить ответ (токен) и сохранить в браузере , используя, например, 

fetch('http://your-api-host/login', {
    method: 'POST',
    body: {
      username: "user1",
      password: "passworduser" 
    }
 })
.then((res) => res.text((res)))
.then((token) => {
   document.cookie = `AUTH_API=${token}`;  <-- this save the cookie
})

С этим значением, сохраненным во внешнем интерфейсе, вам нужно отправить эту информацию по всем запросам, это обычная отправка этого значения в ваш HEADER (как вы делаете), чтобы сэкономить на заголовке, вам нужно прочитать значение из токена и поместить в заголовок, как это : 

const headersTemp = document.cookie.split(';');   // <-- this get all cookies saves and splits them in the array.

const finalHeaders = {};
headersTemp.forEach((header) => {   // <-- looping on all cookies
  const headerTemp = header.split('='); // <-- split each cookie to get key and value
  finalHeaders[headerTemp[0].trim()] = headerTemp[1].trim()   // <-- save on object to access using keys.
})

Теперь вы можете получить доступ ко всем файлам cookie, используя ключ (тот же, что и раньше), я использовал ключ AUTH_API , чтобы сохранить моего повара ie, давайте отправим запрос, используя fetch api: 

fetch('http://your-api-host/route-protected', {
    method: 'POST',
    headers: {
      'x-auth-token': finalHeaders['AUTH_API']
    },
  })

Если вы создаете свое приложение с использованием библиотек как React или любой инфраструктуры SPA, вероятно, вы будете использовать такие инструменты, как Ax ios, и я рекомендую использовать libraris how This с файлами cookie работать проще.

...