MERN堆栈所有用户显示的相同数据

Question

我正在学习MERN stack，我已经完成了这个项目，但是我有用户数据的问题。当用户创建帐户时，他们可以在通过身份验证时添加项目。问题是这些相同的项目出现在另一个用户的仪表板上。我希望用户只看到他们添加的项目。

****api folder item.js code****
const express = require('express');
const router = express.Router();
const auth = require('../../middleware/auth');



//Item model`enter code here`
const Item = require('../../models/Item');

// @route GET api/items
// @description Get All Items
// Access Public
router.get('/', (req, res) =>{
  Item.find()
    .sort({ date: -1 })
    .then(items => res.json(items));

});

// @route POST api/items
// @description Create an item
// Access Private
router.post('/', auth, (req, res) =>{


  const newItem = new Item({
    name: req.body.name


  });


  newItem.save().then(item => res.json(item));

});

// @route DELETE api/items/:id
// @description Delete an item
// Access Private
router.delete('/:id', auth, (req, res) =>{
  Item.findById(req.params.id)
    .then(item => item.remove().then(() => res.json({success:true})))
    .catch(err => res.status(404).json({success: false}));
});




module.exports = router;


****api folder user.js code*******
const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const config = require('config');
const jwt = require('jsonwebtoken');


//User model
const User = require('../../models/User');

// @route POST api/users
// @description Register new user
// Access Public
router.post('/', (req, res) =>{
  const { name, email, password } = req.body;

  //Simple validation
  if(!name || !email || !password){
    return res.status(400).json({ msg:'Please enter all fields' });

  }

  //Check for existing user
  User.findOne({ email })
    .then(user => {
      if(user) return res.status(400).json({ msg: 'User already exists'});

      const newUser = new User({
        name,
        email,
        password

      });

      //Create salt and hash
      bcrypt.genSalt(10, (err, salt) => {
        bcrypt.hash(newUser.password, salt, (err, hash) => {
          if(err) throw err;
          newUser.password = hash;
          newUser.save()
            .then(user => {

              jwt.sign(
                { id: user.id },
                config.get('jwtSecret'),
                { expiresIn: 3600 },
                (err, token) => {
                  if(err) throw err;
                  res.json({
                    token,
                    user: {
                      id: user.id,
                      name: user.name,
                      email: user.email

                    }
                  });


                }

              );

            });
        });
      });
    });

});





module.exports = router;



****api folder user.js code*******

const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const config = require('config');
const jwt = require('jsonwebtoken');
const auth = require('../../middleware/auth');


//User model
const User = require('../../models/User');


// @route POST api/auth
// @description Authenticate the user
// Access Public
router.post('/', (req, res) =>{
  const { email, password } = req.body;

  //Simple validation
  if(!email || !password){
    return res.status(400).json({ msg:'Please enter all fields' });

  }

  //Check for existing user
  User.findOne({ email })
    .then(user => {
      if(!user) return res.status(400).json({ msg: 'User does not exist'});

      //Validate password
      bcrypt.compare(password, user.password)
        .then(isMatch => {
          if(!isMatch) return res.status(400).json({ msg: 'Invalid credentials'});


                        jwt.sign(
                          { id: user.id },
                          config.get('jwtSecret'),
                          { expiresIn: 3600 },
                          (err, token) => {
                            if(err) throw err;
                            res.json({
                              token,
                              user: {
                                id: user.id,
                                name: user.name,
                                email: user.email

                              }
                            });


                          }

                        );
        });

    });

});


// @route GET api/auth/user
// @description Get user data
// Access Private

router.get('/user', auth, (req, res) => {
  User.findById(req.user.id)
    .select('-password')
    .then(user => res.json(user));
});


module.exports = router;

****models file Item.js file****
const mongoose = require('mongoose');
const Schema = mongoose.Schema;

//Create Scheme

const ItemSchema = new Schema({

  name:{
    type: String,
    required: true
  },
  date:{
    type:Date,
    default: Date.now
  }

});


module.exports = Item = mongoose.model('item', ItemSchema);


****model User.js file****
const mongoose = require('mongoose');
const Schema = mongoose.Schema;


//Create Scheme

const UserSchema = new Schema({

  name:{
    type: String,
    required: true,
    trim: true,
  },
  email:{
    type: String,
    required: true,
    unique: true
  },
  password:{
    type: String,
    required: true
  },
  register_date:{
    type:Date,
    default: Date.now
  }

});


module.exports = User = mongoose.model('user', UserSchema);

***itemReducer.js file***
import {GET_ITEMS, ADD_ITEM, DELETE_ITEM, ITEMS_LOADING } from '../actions/types';

const initialState = {
  items: [],
  loading: false
};

export default function(state = initialState, action){
  switch(action.type){
    case GET_ITEMS:
      return{
        ...state,
        items: action.payload,
        loading: false
      };
      case DELETE_ITEM:
        return{
          ...state,
          items:state.items.filter(item => item._id !== action.payload)
        };

      case ADD_ITEM:
        return{
          ...state,
          items:[action.payload, ...state.items]
        };

      case ITEMS_LOADING:
        return{
          ...state,
          loading: true
        };
      default:
        return state;
  }

}

****ItemModal.js***
import React, { Component } from 'react';
import{
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  Form,
  FormGroup,
  Label,
  Input
} from 'reactstrap';
import { connect } from 'react-redux';
import { addItem } from '../actions/itemActions';
import PropTypes from 'prop-types';


class ItemModal extends Component{
  state = {
    modal: false,
    name: ''

  };

  static propTypes = {
    isAuthenticated: PropTypes.bool
  }

  toggle = () =>{
    this.setState({
      modal: !this.state.modal
    });
  };

  onChange = (e) => {
    this.setState({[e.target.name]: e.target.value});
  };

onSubmit = (e) =>{
  e.preventDefault();

  const newItem = {
    name: this.state.name
  };

  //Add item via addItem action
  this.props.addItem(newItem);

  //Close the Modal
  this.toggle();
};

  render(){
    return(
      <div>
      { this.props.isAuthenticated ?   <Button
          color="dark"
          style = {{marginBottom: '2rem'}}
          onClick = {this.toggle}

        >Add Item</Button> : <h4 className = "mb-3 ml-4"> Please login to manage items</h4> }



        <Modal
          isOpen = {this.state.modal}
          toggle = {this.toggle}>

          <ModalHeader toggle={this.toggle}>Add To Shopping List</ModalHeader>
          <ModalBody>
            <Form onSubmit={this.onSubmit}>
              <FormGroup>
              <Label for="item">Item</Label>
              <Input type="text" name="name" id="item" placeholder="Add Shopping Item" onChange={this.onChange}/>

              <Button color="dark" style={{marginTop:'2rem'}} block>Add Item</Button>

              </FormGroup>

            </Form>

          </ModalBody>

        </Modal>
      </div>
    );
  }

}

const mapStateToProps = state => ({
  item: state.item,
  isAuthenticated: state.auth.isAuthenticated

});

export default connect(mapStateToProps, { addItem })(ItemModal);

Answer 1

更新您的项目架构，如下所示

const ItemSchema = new Schema({
  name:{
    type: String,
    required: true
  },
  date:{
    type:Date,
    default: Date.now
  },
  userId: { type: Schema.Types.ObjectId, ref: 'User' }
});

您可以使用文档引用，也可以简单地将userid存储在项架构中。

保存项目时使用userid保存

const newItem = new Item({
    name: req.body.name,
    userId: req.body.userId
});

在检索项目时，在req中发送userid并根据该命令进行查询

items get route

router.get('/', (req, res) =>{
  Item.find({userId: req.body.userId })
    .sort({ date: -1 })
    .then(items => res.json(items));
});

要了解更多信息，可以参考此文档和stackoverflow线程