Как я могу передать JWT со стороны клиента моему API для правильной аутентификации? - PullRequest
Новая
       22

Как я могу передать JWT со стороны клиента моему API для правильной аутентификации?

2 голосов
/ 26 апреля 2019

Мне нужно передать JWT с методами GET, POST, PUT, DELETE из моего пользовательского интерфейса в мой API.

Для этого я попытался создать внешний интерфейс с помощью ReactJS.Я получаю:

POST http://localhost:4000/book/ 401 (неавторизовано), когда пытаюсь отправить запрос.

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

  1. Это контроллер книги 
import mongoose from 'mongoose';
import { book_schema } from '../model/book_model';

const Book = new mongoose.model('Book', book_schema);

export const add_new_book = (req, res) => {
    let new_book = new Book(req.body);

    new_book.save((err, book) => {
        if (err) {
            res.send(err);
        }
        res.json(book);
    });
};
Это книжные маршруты 
import {add_new_book} from '../controller/book_controller';
import {authorization} from '../controller/user_controller';

const book_routes = (app) => {

    //GET
    app.route('/book')
        //POST
        .post(authorization,add_new_book);
}
Это пользовательский контроллер 
import mongoose from 'mongoose';
import bycrypt from 'bcrypt';
import jwt from 'jsonwebtoken';

import { user_schema } from '../model/user_model';

const User = mongoose.model('User', user_schema);

export const register = (req, res) => {
    const new_user = new User(req.body);
    new_user.hash_password = bycrypt.hashSync(req.body.password, 10);
    new_user.save((err, user) => {
        if (err) {
            return res.status(400).send({
                message: err
            });
        } else {
            user.hash_password = undefined;
            return res.json(user);
        }
    });
};

export const authenticate = (req, res) => {
    User.findOne({
        user_name: req.body.user_name
    }, (err, user) => {
        if (err) throw err;
        if (!user) {
            res.status(401).json({ message: 'Authentication Failed ! - No User.' })
        } else if (user) {
            if (!user.comparePassword(req.body.password, user.hash_password)) {
                res.status(401).json({ message: 'Authentication Failed ! - Wrong Password.' })

            } else {
                var token = res.json({
                    token: jwt.sign({ user_name: user.user_name }, 'RESTFULAPIs', { expiresIn: '24h' })
                });
                //$window.sessionStorage.accessToken = response.body.access_token;
                return token;
            }
        }
    });
};

export const authorization = (req, res, next) => {
    if (req.user) {
        next();
    } else {
        return res.status(401).json({ message: 'Unauthorized User !' })
    }
};

export const de_authenticate = (req, res) => {

};
Это сервер 
import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';
import jsonwebtoken from 'jsonwebtoken';
import db_config from './config_db.js';

const app = express();
const PORT = 4000;

//import routes here
import book_routes from './api/route/book_route';
import user_routes from './api/route/user_route';
import item_routes from './api/route/item_route';


//mongo DB connection
mongoose.Promise = global.Promise;
mongoose.connect(db_config.DB, { useNewUrlParser: true }).then(
    () => { console.log('Database is connected') },
    err => { console.log('Can not connect to the database' + err) }
);

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

//JWT setup
app.use((req, res, next) => {
    if (req.headers && req.headers.authorization && req.headers.authorization.split(' ')[0] === 'JWT') {
        jsonwebtoken.verify(req.headers.authorization.split(''), [1], 'RESTFULAPIs', (err, decode) => {
            if (err) req.user = undefined;
            req.user = decode;
            //console.log(req.user );
            //console.log(decode);
            next();
        });
    } else {
        req.user = undefined;
        next();
    }
});


//to app
book_routes(app);
user_routes(app);
item_routes(app);


app.get('/', (req, res) =>
    res.send(`Node Server and Express Server Running on Port : ${PORT}`)
);

app.listen(PORT, function () {
    console.log(`Server is running on Port: ${PORT}`);
});

Я разработал интерфейс, используя ReactJS, и импортировал axios для API доступа через URL.В файле insert_book.js моя функция отправки формы выглядит следующим образом: 

  onSubmit(e) {
        e.preventDefault();
        const book_obj = {
            book_no:this.unique_id_generator(),
            isbn_no: this.state.isbn_no,
            author: this.state.author,
            published_year: this.state.published_year,
            publisher: this.state.publisher,
            category:this.state.category
        };
        axios.post('http://localhost:4000/book/', book_obj)
            .then(res => console.log(res.data));
        this.setState({
            isbn_no: '',
            author:'',
            published_year: '',
            publisher: '',
            category:''
        })
    }

Наконец, я хотел бы предоставить код пользовательских маршрутов, 

import {register,
    authenticate,
    authorization
} from '../controller/user_controller';

const user_routes = (app) => {

    //SIGNUP
    app.route('/auth/signup')
        //POST A USER
        .post(register);

    //SIGNIN
    app.route('/auth/signin')
    //AUTHENTICATE USER
    .post(authenticate);
}
export default user_routes;

Вот области, где я застрял:

  1. Как я могу хранить эти токены в сеансах для отправки с будущими запросами?
  2. Как прикрепить и отправить значение токена с помощью методов GET, POST, PUT, DELETE?

1 Ответ

0 голосов
/ 26 апреля 2019

, чтобы хранить токен в локальном хранилище: 

const user: User = getUserFromBackend()
// assuming user is an object
localStorage.setItem('token', user.token);
// get token
const token = localStorage.getItem('token');

, чтобы сделать запрос с заголовком токена: 

const token = localStorage.getItem('token');
fetch(url, {
        method: "POST", 
        headers: {
            "Content-Type": "application/json",
            'Authorization': `Bearer ${token}`,
        },
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json())
...