add interceptor for request. add secureRoute middleware. fix use localStorage

api_client/middleware/secureRoute.js

+const User = require("../models/User");
+
+const secureRoute = async (req, res, next) => {
+    const token = req.get('Authorization');
+
+    if (!token) return res
+        .status(401)
+        .send({error: 'No token present'});
+
+    const user = await User.findOne({token});
+
+    if (!user) return res
+        .status(401)
+        .send('Token is wrong');
+
+    next();
+}
+
+module.exports = secureRoute;

api_client/routes/categories.js

 const router = require('express').Router();
 const Category = require('../models/Category');
+const secureRoute = require("../middleware/secureRoute");
 
 router.get('/', async (req, res) => {
     try {
@@ -9,7 +10,7 @@ router.get('/', async (req, res) => {
     }
 });
 
-router.post('/', async (req, res) => {
+router.post('/', secureRoute, async (req, res) => {
    const category = new Category(req.body);
 
    try {

api_client/routes/products.js

@@ -5,7 +5,7 @@ const multer = require('multer');
 const path = require('path');
 const {uploadPath} = require('./../config');
 const Product = require('../models/Product');
-const User = require("../models/User");
+const secureRoute = require("../middleware/secureRoute");
 
 const storage = multer.diskStorage({
    destination: (req, file, cb) => {
@@ -19,19 +19,7 @@ const storage = multer.diskStorage({
 const upload = multer({storage});
 
 const createRoutes = () => {
-    router.post('/', upload.single('image'), async (req, res) => {
-        const token = req.get('Authorization');
-
-        if (!token) return res
-            .status(401)
-            .send({error: 'No token present'});
-
-        const user = await User.findOne({token});
-
-        if (!user) return res
-            .status(401)
-            .send('Token is wrong');
-
+    router.post('/', upload.single('image'), secureRoute, async (req, res) => {
         const productData = {...req.body};
 
         if (req.file) productData.image = req.file.filename;

api_client/routes/users.js

 const router = require('express').Router();
 const User = require('../models/User');
+const secureRoute = require("../middleware/secureRoute");
 
 router.post('/', async (req, res) => {
     try {
@@ -37,35 +38,21 @@ router.post('/login', async (req, res) => {
     }
 });
 
-router.get('/profile', async (req, res) => {
+router.get('/profile', secureRoute, async (req, res) => {
     const token = req.get('Authorization');
-
-    if (!token) return res
-        .status(401)
-        .send({error: 'No token present'});
-
     const user = await User.findOne({token});
 
-    if (!user) return res
-        .status(401)
-        .send('Token is wrong');
-
     res.send({
        message: "Большой большой сикрет",
        username: user.username
     });
 });
 
-router.delete('/logout', async (req, res) => {
+router.delete('/logout', secureRoute, async (req, res) => {
     const token   = req.get('Authorization');
     const success = {message: 'Success'};
-
-    if (!token) return res.send(success);
-
     const user    = await User.findOne({token});
 
-    if (!user) return res.send(success);
-
     user.token = null;
     user.save();
 

front_client/src/App.js

@@ -3,7 +3,7 @@ import {Route, Routes} from "react-router-dom";
 import {LOGIN, PRODUCT_ADD, PRODUCT_LIST, PRODUCT_VIEW, REGISTER} from "./constants/routes";
 import Layout from "./components/Layout/Layout";
 import Products from "./containers/Products/Products";
-import AddProduct from "./containers/Addproduct/AddProduct";
+import AddProduct from "./containers/AddProduct/AddProduct";
 import Register from "./containers/Auth/Register/Register";
 import Login from "./containers/Auth/Login/Login";
 import {useSelector} from "react-redux";

front_client/src/api/axiosApi.js

@@ -5,4 +5,14 @@ const instance = axios.create({
     baseURL: apiUrl + "/api/v1"
 });
 
+instance.interceptors.request.use(function (config) {
+    if (localStorage.getItem('user') !== null) {
+        config.headers.Authorization = JSON.parse(localStorage.getItem('user')).token;
+    }
+
+    return config;
+}, function(error) {
+    return Promise.reject(error);
+});
+
 export default instance;

front_client/src/containers/Addproduct/AddProduct.jsx → front_client/src/containers/AddProduct/AddProduct.jsx

@@ -9,9 +9,8 @@ const AddProduct = () => {
     const dispatch = useDispatch();
     const navigate = useNavigate();
 
-    const onProductFormSubmit = async productData => {
-        await dispatch(createProduct(productData));
-        navigate('/');
+    const onProductFormSubmit = async data => {
+        await dispatch(createProduct({data, callback: () => navigate('/')}));
     };
 
     return (

front_client/src/containers/Auth/Login/Login.jsx

-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {Avatar, Button, Container, Grid, Typography, Link, Box, CssBaseline, Alert} from "@mui/material";
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-import {Link as RouterLink, useNavigate} from 'react-router-dom';
+import {Link as RouterLink, useLocation, useNavigate} from 'react-router-dom';
 import {REGISTER} from "../../../constants/routes";
 import {useDispatch, useSelector} from "react-redux";
 import {loginUser} from "../../../store/actions/usersActions";
 import TextInput from "../../../components/UI/Form/FormElement/TextInput/TextInput";
+import {setLoginError} from "../../../store/services/usersSlice";
 
 const theme = createTheme();
 
@@ -19,6 +20,12 @@ const Login = () => {
         password: ""
     });
 
+    const location = useLocation();
+
+    useEffect(() => {
+        dispatch(setLoginError(null));
+    }, [location]);
+
     const inputChangeHandler = (e) => {
         const {name, value} = e.currentTarget;
 

front_client/src/containers/Auth/Register/Register.jsx

-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {Avatar, Button, Container, Grid, Typography, Link, Box, CssBaseline} from "@mui/material";
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-import {Link as RouterLink, useNavigate} from 'react-router-dom';
+import {Link as RouterLink, useLocation, useNavigate} from 'react-router-dom';
 import {LOGIN} from "../../../constants/routes";
 import {useDispatch, useSelector} from "react-redux";
 import {registerUser} from "../../../store/actions/usersActions";
 import TextInput from "../../../components/UI/Form/FormElement/TextInput/TextInput";
+import {setRegisterError} from "../../../store/services/usersSlice";
 
 const theme = createTheme();
 
@@ -19,6 +20,12 @@ const Register = () => {
         password: ""
     });
 
+    const location = useLocation();
+
+    useEffect(() => {
+        dispatch(setRegisterError(null));
+    }, [location]);
+
     const inputChangeHandler = (e) => {
         const {name, value} = e.currentTarget;
 

front_client/src/index.js

@@ -11,12 +11,18 @@ import {BrowserRouter} from "react-router-dom";
 
 const localStorageMiddleware = ({getState}) => next => action => {
     const result = next(action);
+    if (getState().usersState.user) {
         localStorage.setItem('user', JSON.stringify(getState().usersState.user));
+    } else {
+        localStorage.removeItem('user');
+    }
     return result;
 };
 
 const reHydrateStore = () => {
-    if (localStorage.getItem('user') !== null) {
+    const userLocalStorage = localStorage.getItem('user');
+
+    if (userLocalStorage !== null || userLocalStorage !== 'null' || userLocalStorage !== '') {
         return {
             usersState: {
                 user: JSON.parse(localStorage.getItem('user'))

front_client/src/store/actions/productsActions.js

@@ -8,7 +8,7 @@ export const fetchProducts = createAsyncThunk(
 
 export const createProduct = createAsyncThunk(
     'products/create',
-    async (data) => await axios
+    async ({data, callback}) => await axios
         .post('/products', data)
-        .then(res => res.data)
+        .then(res => callback())
 );

front_client/src/store/actions/usersActions.js

@@ -16,7 +16,7 @@ export const registerUser = createAsyncThunk(
 
 export const loginUser = createAsyncThunk(
     'users/login',
-    async ({data, callback}, {dispatch, getState}) => await axiosApi
+    async ({data, callback}, {dispatch}) => await axiosApi
         .post('/users/login', data)
         .then(res => {
             dispatch(setUser(res.data));
@@ -31,11 +31,8 @@ export const loginUser = createAsyncThunk(
 
 export const logoutUser = createAsyncThunk(
     'users/logout',
-    async (payload, {dispatch, getState}) => await axiosApi
-        .delete(
-            '/users/logout',
-            {headers: {Authorization: getState().usersState.user.token}}
-        )
+    async (payload, {dispatch}) => await axiosApi
+        .delete('/users/logout')
         .then(res => {
             dispatch(setUser(null));
             payload.callback();

front_client/src/store/services/productsSlice.js

 import {createSlice} from "@reduxjs/toolkit";
-import {createProduct, fetchProducts} from "../actions/productsActions";
+import {fetchProducts} from "../actions/productsActions";
 
 const initialState = {
     products: []
@@ -16,14 +16,6 @@ const productsSlice = createSlice({
                     state.products = action.payload || [];
                 }
             );
-
-        builder
-            .addCase(
-                createProduct.fulfilled,
-                (state, action) => {
-                    state.products.push(action.payload);
-                }
-            );
     }
 });