использовать куки для хранения токенов

Question

Я создаю приложение, в котором мне нужно авторизовать пользователей для входа в систему. Я прочитал, что localstorage не является безопасным вариантом, поэтому я решил использовать файлы cookie для хранения токенов, но сейчас я уверен, что мне удалось сохранить токены в файлах cookie, но я не знаю,что делать дальше, как использовать их на стороне клиента, вот мой код

здесь есть конец: маршруты:

var express = require('express')
var router = express.Router()
var Controller = require('./controller')
var authController = require('./authController')
var BooksIdeaController = require('./BooksIdeaController')
router.post('/register',Controller.register);
router.post('/login',authController.login);
router.post('/booksIdea/:id',authController.verify,BooksIdeaController.addComment)
router.post('/booksIdea/addbook',authController.verify,BooksIdeaController.addBookIdea)
router.get('/booksIdea/show',authController.verify,BooksIdeaController.showBookIdea)
router.put('/booksIdea/edit/:id',authController.verify,BooksIdeaController.UpdateBookIdea)
router.delete('/booksIdea/delete/:id',authController.verify,BooksIdeaController.DeleteBookIdea)
module.exports = router;

файл authController.js

 const con = require('./db');
    var bcrypt = require('bcrypt');
    let jwt = require('jsonwebtoken');
    const express = require('express')
    var cookieParser = require('cookie-parser')
    const app = express()
    module.exports.login=function(req,res){
        var username=req.body.name;
        var password=req.body.password;
        con.query('SELECT * FROM users WHERE username = ?',[username], function (error, results, fields) {
          if (error) {
              res.json({
                status:false,
                message:'there are some error with query'
                })
          }else{
            if(results.length >0){
              bcrypt.compare(password, results[0].password, function (err, result) {
                if (result == true) {
            jwt.sign({user:results},'configSecret',(err,token)=>{
              // res.json({
              //   token:token
              // })
              res.cookie('token', token, { httpOnly: true })
                .sendStatus(200);
              res.send('About this wiki');
            });



                //   res.json({
                //     status:true,
                //     message:'successfully authenticated'
                // })
                } else {
                  res.json({
                          status:false,
                          message:"username and password does not match"
                         });
                }
              });
            }
            else{
              res.json({
                  status:false,    
                message:"username does not exits"
              });
            }
          }
        });
    }

    module.exports.home=function(req,res){
    res.send('hello');
    }
    //////
    // if(password==results[0].password){

      // }else{
      //    
      // }
      module.exports.verify = function verifyToken(req, res, next) {
        // Get auth header value
        const bearerHeader = req.headers['authorization'];
        // Check if bearer is undefined
        if(typeof bearerHeader !== 'undefined') {
          // Split at the space
          const bearer = bearerHeader.split(' ');
          // Get token from array
          const bearerToken = bearer[1];
          // Set the token
          req.token = bearerToken;
          // Next middleware
          next();
        } else {
          // Forbidden
          res.sendStatus(403);
        }

      }

вот реагирующая часть

import axios from 'axios'
export const login = user => {
  return axios
    .post('http://localhost:5001/login', {
      name: user.name,
      password: user.password
    })
    .then(response => {
      return response.data

    })
    .catch(err => {
      console.log(err)
    })
}

Answer 1

REACT Side:

HOC для проверки вашего аутентифицированного или не вызывающего / api / auth запроса к серверу

/**
 * auth.js : it handles user is authenticated or not
 * 
 */
 
import React, { Component } from 'react';
import { auth } from '../../actions'
import { connect } from 'react-redux';

export default function(ComposedClass,reload){
    class AuthenticationCheck extends Component{
    
        state = {
            loading : true
        }

        componentWillMount () {
            this.props.dispatch(auth())
        }

        componentWillReceiveProps (nextProps) {
            this.setState({
                loading : false
            })

            if(!nextProps.admin.login.isAuth){
                if(reload){
                    this.props.history.push('/login')
                }
            }
        } 
    
        render(){
            if(this.state.loading){
                return <div className="loader"> Loading... </div>
            }
            return(
               <ComposedClass {...this.props} users={this.props.users} />
            )
        }
    }

    function mapStateToProps(state){
        console.log(state)
        return{
            admin: state.users
        }
    }
    return connect(mapStateToProps)(AuthenticationCheck)
}

Пройдите весь свой путь к этому компоненту HOC, например

import React from 'react';
import  { Switch , Route  } from 'react-router-dom';
import Home from './components/Home/home';
import Users from './components/UsersView/users';
import User from  './components/UserView/user';
import FourOFour from  './components/FourOFour/fourofour';
import AddUser from './containers/Admin/add';
import EditUser from './containers/Admin/edit';
import UserContainer from './containers/User/user_container.js';
import Login from './containers/Login/login';
import Signup from './containers/Signup/signup';
import Auth from './hoc/Auth/auth';
import Logout from './components/Logout/logout';


import Layout from './hoc/Layout/layout';


const Routes = () => {
    return (
        <Layout>
            <Switch> 
                <Route path="/signup" exact  component={ Auth(Signup,false) } />
                <Route path="/logout" exact  component={ Auth(Logout,true) } />
                <Route path="/login" exact  component={ Auth(Login,false) } />
                <Route path="/users/add" exact  component={ Auth(AddUser,false) } /> 
                <Route path="/users/:id/edit" exact  component={ Auth(EditUser,true) } />          
                <Route path="/users/:id" exact component={ Auth(UserContainer,true) } />
                <Route path="/users" exact component={ Auth(Users,false) } />
                <Route path="/" exact  component={ Auth(Home,null) } />
                <Route component={FourOFour}/>     
            </Switch>
        </Layout>
       
    );
};

export default Routes;

УЗЕЛ Сторона:

 /**
 * auth : Middleware which chack your tocken is valide or not
 */
    const  { Admin } = require('../models/admin');
    
    let auth = (req,res,next) =>{
        let token = req.cookies.auth;
        
        Admin.findByToken(token,(err,admin)=>{

            if (!admin) return res.json({
                error : true
            })
            
            req.token = token;
            req.admin = admin;

            next();
        })
        
    }

    
    module.exports = { auth }
    

Вы можете использовать аутентификацию на своем маршруте, где вы хотите проверить аутентификацию.

//admin auth : 
app.get("/api/auth",auth,(req,res) => { 
    console.log(auth)
    res.json({
        isAuth : true,
        id : req.admin._id,
        email : req.admin.email,
    })
})

Для получения дополнительной информации посетите мой Проект приложения Mern

Я надеюсь, что это поможет вам, а также сделайте Upvote и Right, чтобы другие получилипольза от этого вопроса. если у вас возникнут проблемы, дайте мне знать.