@1programmer

Как правильно организовать работу с токенами (jwt) в react?

Использую node.js + express. При авторизации пользователю выдаю accessToken и refreshToken.
Есть middleware на беке, для теста:
const jwt = require("jsonwebtoken");
require("dotenv").config();
const { tokenValidate } = require("../helpers/validate");

function authMiddleware(req, res, next) {
  const authHeader = req.get("Authorization");

  if (!authHeader) {
    return res.status(400).send({
      status: false,
      message: "Where is token ?"
    });
  }

  const token = authHeader.replace("Bearer ", "");

  let validateData = {
    token: token,
    secret: process.env.token_secret,
    type: "access"
  };

  const result = tokenValidate(validateData);
  console.log(result);
  if (result.status && result.message.type === "access") {
    next();
  }

  return res.send({
    status: false,
    message: result.message
  });
}

module.exports = {
  authMiddleware
};

И сам роут:
router.post("/test", authMiddleware, (req, res) => {
  res.send({
    message: "trorlrlrolr"
  });
});


Далее на фронте я сделал PrivateRoute:
import React from "react";
import { useContext } from "react";
import { Context } from "../../Context";
import { Redirect, Route } from "react-router-dom";

const PrivateRoute = ({ component: Component, ...rest }) => {
  const { state } = useContext(Context);
  return (
    <Route
      {...rest}
      render={props =>
        state.tokens &&
        state.tokens.refreshToken !== "" &&
        state.tokens.accessToken !== "" ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

export default PrivateRoute;

1) Где мне стоит проверять работоспособность токена ? Если я возьму например interceptor и буду смотреть по нему, но на странице например не будет запросов к беку, то получается этот вариант не подходит, верно ?
2) Если будут запросы к беку, мне все проверять через interceptor ? Не совсем понимаю как его использовать в случае с рефреш токеном.
  • Вопрос задан
  • 931 просмотр
Пригласить эксперта
Ответы на вопрос 1
@PAVLIK_GYRA
В authMiddleware подключена библиотека jwt но так и не использована! Вот пример моего мидла
const jwt = require('jsonwebtoken')
const c = require('config')

// проверка токена

const auth = async (req, res, next) => {
  try {
    const token = req.header('x-auth-token') //тут может быть любой хэдр у меня кастомный
    if (!token) return res.status(401).json({ msg: 'No auth 1' })
    const verified = jwt.verify(token, c.get('jwtSecret'))
    if (!verified) return res.status(401).json({ msg: 'No auth 2' })
    req.user = verified.id
    next()
  } catch (e) {
    res.status(500).json({ error: e.message })
  }
}

module.exports = auth


потом на фронте например на странице авторизации и отправке данных и проверке на сервере вернуть токен и юзерИнфо на фронт(желательно ещё записать в localStorage типа token:dghehgfdgnhrhwrr) закинуть в useState и до нужного элемента прокинуть через useContext. А потом как хочешь... на нужной странице можешь опять проверить токен и если он валидный выполнять ту или иную логику.
1) только на сервере тк так есть серверный ключ для расшифровки.
2) например я проверяю токен при первом обращении к сайту так
router.post('/login', async (req, res) => {
  // --> проверка токена на валидность
  try {
    const token = req.header('x-auth-token')
    if (!token) return res.json(false)
    const verified = jwt.verify(token, config.get('jwtSecret'))
    if (!verified) return res.json(false)
    const user = await User.findById(verified.id)
    if (!user) return res.json(false)
    return res.json(true)
  } catch (e) {
    res.status(500).json({ error: e.message })
  }
})


у меня любой запрос на сервер идёт с хэдером и на сервере его проверяет милдвэр auth
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы