我创建了用户登录，并在reactjs和mongodb(MERN(中获取所有发布的书籍，但我想在reactj-mongodb中插入他的每一篇帖子的用户id，这样只有他才能在自己的管理面板中看到他的帖子。下面是代码的特性。我尝试了很多，但都失败了，请任何人解决这个问题。。。。提前感谢。。。
这是我的/app.js
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var bodyParser = require('body-parser');
var book = require('./routes/book');
var auth = require('./routes/auth');
var app = express();
var mongoose = require('mongoose');
mongoose.Promise = require('bluebird');
mongoose.connect('mongodb://localhost/admin_c', { promiseLibrary: require('bluebird') })
//.connect('mongodb://localhost/mern-crud', { useMongoClient: true, promiseLibrary: require('bluebird') })
.then(() => console.log('connection succesful and port runing on 1004'))
.catch((err) => console.error(err));
const connectHistoryApiFallback = require('connect-history-api-fallback');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'false'}));
app.use(connectHistoryApiFallback({
verbose: false
}));
app.use(express.static(path.join(__dirname, 'build')));
app.use('/api/book', book);
app.use('/api/auth', auth);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;这是我的/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
//import '../../node_modules/bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Login from './components/Login';
import Register from './components/Register';
import Edit from './components/Edit';
import Create from './components/Create';
import Show from './components/Show';
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={App} />
<Route path='/Create' component={Create} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<Route path='/Show/:id' component={Show} />
</div>
</Router>,
document.getElementById('root')
);
registerServiceWorker();这是我的/src/components/Login.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import { Link } from 'react-router-dom';
import './Login.css';
class Login extends Component {
constructor() {
super();
this.state = {
username: '',
password: '',
message: ''
};
}
onChange = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state);
}
onSubmit = (e) => {
e.preventDefault();
const { username, password } = this.state;
axios.post('/api/auth/login', { username, password })
.then((result) => {
localStorage.setItem('jwtToken', result.data.token);
this.setState({ message: '' });
this.props.history.push('/')
})
.catch((error) => {
if(error.response.status === 401) {
this.setState({ message: 'Login failed. Username or password not match' });
}
});
}
render() {
const { username, password, message } = this.state;
return (
<div class="container">
<form class="form-signin" onSubmit={this.onSubmit}>
{message !== '' &&
<div class="alert alert-warning alert-dismissible" role="alert">
{ message }
</div>
}
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" class="form-control" placeholder="Email address" name="username" value={username} onChange={this.onChange} required/>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" class="form-control" placeholder="Password" name="password" value={password} onChange={this.onChange} required/>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
<p>
Not a member? <Link to="/register"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Register here</Link>
</p>
</form>
</div>
);
}
}
export default Login;这是我的/routes/auth.js
var mongoose = require('mongoose');
var passport = require('passport');
var settings = require('../config/settings');
require('../config/passport')(passport);
var express = require('express');
var jwt = require('jsonwebtoken');
var router = express.Router();
var User = require("../models/user");
router.post('/register', function(req, res) {
if (!req.body.username || !req.body.password) {
res.json({success: false, msg: 'Please pass username and password.'});
} else {
var newUser = new User({
username: req.body.username,
password: req.body.password
});
// save the user
newUser.save(function(err) {
if (err) {
return res.json({success: false, msg: 'Username already exists.'});
}
res.json({success: true, msg: 'Successful created new user.'});
});
}
});
router.post('/login', function(req, res) {
User.findOne({
username: req.body.username
}, function(err, user) {
if (err) throw err;
if (!user) {
res.status(401).send({success: false, msg: 'Authentication failed. User not found.'});
} else {
// check if password matches
user.comparePassword(req.body.password, function (err, isMatch) {
if (isMatch && !err) {
// if user is found and password is right create a token
var token = jwt.sign(user.toJSON(), settings.secret);
// return the information including token as JSON
res.json({success: true, token: 'JWT ' + token});
} else {
res.status(401).send({success: false, msg: 'Authentication failed. Wrong password.'});
}
});
}
});
});
module.exports = router;这是我的/src/Components/Create.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import { Link } from 'react-router-dom';
class Create extends Component {
constructor(props) {
super(props);
this.state = {
isbn: '',
title: '',
author: '',
description: '',
published_year: '',
publisher: '',
newdescription: '',
};
}
onChange = (e) => {
const state = this.state
state[e.target.name] = e.target.value;
this.setState(state);
}
onSubmit = (e) => {
e.preventDefault();
const { isbn, title, author, description, published_year, publisher, newdescription } = this.state;
axios.post('/api/book', { isbn, title, author, description, published_year, publisher, newdescription })
.then((result) => {
this.props.history.push("/")
});
}
render() {
const { auth } = this.props;
var pageTitle = `Welcome, { auth.username }`;
const { isbn, title, author, description, published_year, publisher, newdescription } = this.state;
return (
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
ADD BOOK
</h3>
</div>
<div class="panel-body">
<h4><Link to="/"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Book List</Link></h4>
<form onSubmit={this.onSubmit} method="POST">
<div class="form-group">
<h1>testtt{ this.state.username }</h1>
<label for="isbn">ISBN:</label>
<input type="text" class="form-control" name="isbn" value={isbn} onChange={this.onChange} placeholder="ISBN" />
</div>
<div class="form-group">
<label for="title">Title:</label>
<input type="text" class="form-control" name="title" value={title} onChange={this.onChange} placeholder="Title" />
</div>
<div class="form-group">
<label for="author">Author:</label>
<input type="text" class="form-control" name="author" value={author} onChange={this.onChange} placeholder="Author" />
</div>
<div class="form-group">
<label for="description">Description:</label>
<textArea class="form-control" name="description" onChange={this.onChange} placeholder="Description" cols="80" rows="3">{description}</textArea>
</div>
<div class="form-group">
<label for="published_date">Published Date:</label>
<input type="number" class="form-control" name="published_year" value={published_year} onChange={this.onChange} placeholder="Published Year" />
</div>
<div class="form-group">
<label for="publisher">Publisher:</label>
<input type="text" class="form-control" name="publisher" value={publisher} onChange={this.onChange} placeholder="Publisher" />
</div>
<div class="form-group">
<label for="publisher">Newdescription:</label>
<input type="text" class="form-control" name="newdescription" value={newdescription} onChange={this.onChange} placeholder="New Description" />
</div>
<input type="submit" name="comment_submit" class="btn btn-primary btn-nexgweb btn-block" value="Submit" />
</form>
</div>
</div>
</div>
);
}
}
export default Create;这是我的/routes/book.js
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Book = require('../models/Book.js');
var passport = require('passport');
require('../config/passport')(passport);
/* GET ALL BOOKS */
router.get('/', passport.authenticate('jwt', { session: false}), function(req, res) {
var token = getToken(req.headers);
if (token) {
Book.find(function (err, books) {
if (err) return next(err);
res.json(books);
});
} else {
return res.status(403).send({success: false, msg: 'Unauthorized.'});
}
});
/* GET SINGLE BOOK BY ID */
router.get('/:id', function(req, res, next) {
Book.findById(req.params.id, function (err, post) {
if (err) return next(err);
res.json(post);
});
});
/* SAVE BOOK */
router.post('/', passport.authenticate('jwt', { session: false}), function(req, res) {
var token = getToken(req.headers);
if (token) {
Book.create(req.body, function (err, post) {
if (err) return next(err);
res.json(post);
});
} else {
return res.status(403).send({success: false, msg: 'Unauthorized.'});
}
});
getToken = function (headers) {
if (headers && headers.authorization) {
var parted = headers.authorization.split(' ');
if (parted.length === 2) {
return parted[1];
} else {
return null;
}
} else {
return null;
}
};
module.exports = router;这是我的/models/Book.js
var mongoose = require('mongoose');
var BookSchema = new mongoose.Schema({
isbn: String,
title: String,
author: String,
description: String,
published_date: { type: Date },
publisher: String,
postedBy: HERE I NEED TO INCLUDE USER_ID,
updated_date: { type: Date, default: Date.now },
});
module.exports = mongoose.model('Book', BookSchema);这是我的包.json
{
"name": "my_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bcrypt-nodejs": "0.0.3",
"bluebird": "^3.5.2",
"body-parser": "^1.18.3",
"connect-mongo": "^2.0.1",
"cookie-parser": "^1.4.3",
"express": "^4.16.4",
"express-session": "^1.15.6",
"jsonwebtoken": "^8.3.0",
"mongoose": "^5.3.6",
"morgan": "^1.9.1",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.0.5",
"save": "^2.3.2",
"serve-favicon": "^2.5.0"
},
"scripts": {
"start": "node ./bin/www",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}嘿，你必须在像这样的图书模式中引用用户id
var BookSchema = new mongoose.Schema({
isbn: String,
title: String,
author: String,
description: String,
published_date: { type: Date },
publisher: String,
postedBy:type: {type:Schema.Types.ObjectId, ref:'user'},
updated_date: { type: Date, default: Date.now },
});
像这样，当你发布一本书时插入它通过这个id通过req.body发送，关键字postedBy你的req.body应该像
isbn: 'any thing',
title: 'any thing',
author: 'any thing',
description: 'any thing',
published_date: 'any thing',
publisher: 'any thing',
postedBy: 'user._id',
在检索时，请检查用户_id等于像一样的图书id
Book.find({postedBy:req.body.userid(or any other format you want like query params)},function (err, books) {
if (err) return next(err);
res.json(books);
});
} else {
return res.status(403).send({success: false, msg: 'Unauthorized.'});
}