当前位置: 首页 > 知识库问答 >
问题:

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

叶鹭洋
2023-03-14

我正在学习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);

共有1个答案

刘博雅
2023-03-14

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

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线程

 类似资料:
  • 下面是我MERN项目的文件结构。 客户端文件夹包含反应服务器。客户端在<code>localhost.Client上运行。comServer文件夹包含节点的代码。js服务器。服务器运行于 每当我从客户端向服务器发出请求时。如何缓解 csrf 攻击?确保向服务器发出的请求来自客户端,而不是来自任何其他源。

  • 我正在尝试从数据库中提取数据。我从回应中得到的都是这样的: 我需要帮助如何在前端和后端提出请求: 以下是ReactJS方面: 以下是请求的服务器端: 以下是ProductService: 附注:产品在MongoDB Compass中创建时没有错误:

  • 我需要使用静态结构显示堆栈和队列的所有元素,我使用了一个递归函数,但使用动态函数时,它一点也不工作。 当我使用函数时,它会正确地显示元素,但之后,无论我做什么,程序都会崩溃。 另外,为了执行print(),一个条件是它假设我只能访问顶部,因此如果我显示顶部,我就看不到上一个节点,除非我弹出当前顶部,然后显示新的顶部。 以下是动态堆栈的代码: 正如我所说的,队列正在做同样的事情,但是找出这里的问题,

  • 问题内容: 内核堆栈和用户堆栈有什么区别?为什么要使用内核堆栈?如果在ISR中声明了局部变量,它将存储在哪里?每个进程都有自己的内核堆栈吗?那么,进程如何在这两个堆栈之间进行协调? 问题答案: 内核堆栈和用户堆栈有什么区别? 简而言之,除了在内存中使用不同的位置(并因此为堆栈指针寄存器使用不同的值)之外,什么也没有,而且通常使用不同的内存访问保护。也就是说,在用户模式下执行时,即使映射了内核内存(

  • 我正在使用AWS Lambda、API网关和CloudFormation开发REST API。我达到了Cloudformation 500资源限制,因此我不得不选择嵌套堆栈。下面是我试过的。 样板亚马尔 模板用户。亚马尔 模板2。亚马尔 这是可行的,但我注意到API网关为我创建的每个堆栈分配了不同的URL。在这个例子中,我有两个堆栈,API网关创建了两个URL。 URL-https://ez5kh

  • 我正在按照本指南部署MERN stack app,使用heroku和github页面-https://github.com/juliojgarciaperez/deploy-mern Q1.我是否需要创建两个不同的存储库,一个用于后端,一个用于前端来连接到Heroku?(T.EX后端存储库到heroku管道)我最初在同一个存储库下开发了后端和前端。 Q2.我设法获得了指南中的步骤:3,并按照前面提