身份驗證應用程序 - 獲取登錄的用戶個人資料信息 - 錯誤

Question

我正在通過devchallenges.io上的完整堆棧認證，並且正在做身份驗證應用程序挑戰。 到目前為止，我已經能夠創建登錄和注冊功能，並且能夠設置獲取登錄用戶並顯示其信息的功能，以及用戶在注冊或登錄時更新其個人資料的功能一個用戶，無論哪個用戶登錄，都會顯示同一個用戶的個人資料信息。我附上了一個織機視頻的鏈接來演示這個問題。 此外，。 我附上了 github 源代碼鏈接。

https://www.loom.com/share/c464f456751a45068110e699f796e11d

https://github.com/gbopola/Auth-App

Profile.js

import React, { useEffect, useState } from 'react';
import { Navbar } from './Navbar';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { loadUser } from '../redux/actions/auth';
import { Link } from 'react-router-dom';
import { store } from '../store';
export const Profile = () => {
  const [hover, setHover] = useState(false);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(loadUser());
  }, []);
  const state = useSelector((state) => state.auth);

  let styles = {
    width: '72px',
    height: '72px',
    borderRadius: '8px',
    background: `url(${
      state && state.user && state.user.avatar
    }) center center/cover`,
  };

  return (
    <div className="Profile">
      <Navbar />
      <div className="profile-personal-info">
        <h1>Personal Info</h1>
        <p className="personal-info-text">
          Basic info, like your name and photo
        </p>
      </div>
      <div className="profile-wrapper">
        <div className="profile-heading">
          <div>
            <h2>Profile</h2>
            <p className="personal-info-grey">
              Some info may be visible to other people
            </p>
          </div>
          <Link to={`/profile/edit/${state && state.user && state.user._id}`}>
            <button className="edit-btn">Edit</button>
          </Link>
        </div>
        <div className="divider"></div>
        <div className="profile-photo">
          <p className="personal-info-grey">PHOTO</p>
          <div className="profile-img" style={styles}></div>
        </div>
        <div className="divider"></div>
        <div className="name">
          <p className="personal-info-grey">NAME</p>
          <p className="name-text">{state && state.user && state.user.name}</p>
        </div>
        <div className="divider"></div>
        <div className="bio">
          <p className="personal-info-grey">BIO</p>
          <p className="bio-text">{state && state.user && state.user.bio}</p>
        </div>
        <div className="divider"></div>
        <div className="phone">
          <p className="personal-info-grey">PHONE</p>
          <p className="phone-text">
            {state && state.user && state.user.phone}
          </p>
        </div>
        <div className="divider"></div>
        <div className="email">
          <p className="personal-info-grey">EMAIL</p>
          <p className="email-text">
            {state && state.user && state.user.email}
          </p>
        </div>
        <div className="divider"></div>
        <div className="password">
          <p className="personal-info-grey">PASSWORD</p>
          <p className="password-text">***********</p>
        </div>
      </div>
    </div>
  );
};

服務器.js

const express = require('express');
const connectDB = require('./config/db');
const app = express();
const { check, validationResult } = require('express-validator');
const User = require('./models/User');
const gravatar = require('gravatar');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const config = require('config');
const auth = require('./middleware/auth');
const cloudinary = require('./utils/cloudinary');
const upload = require('./utils/multer');

// Connect database
connectDB();

// Init Middleware
app.use(express.json({ extended: false }));

// @route    POST /register
// @desc     Register user
// @access   Public
app.post(
  '/register',
  [
    check('email', 'Please include a valid email').isEmail(),
    check('password', 'Please enter a password').notEmpty(),
  ],
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }
    const { email, password } = req.body;

    try {
      // See if user exists
      let user = await AuthUser.findOne({ email });

      if (user) {
        return res
          .status(400)
          .json({ errors: [{ msg: 'User already exists' }] });
      }
      // Get users gravatar
      const avatar = gravatar.url(email, {
        s: '200',
        r: 'pg',
        d: 'mm',
      });

      user = new AuthUser({
        email,
        avatar,
        password,
      });

      // Encrypt password
      const salt = await bcrypt.genSalt(10);

      user.password = await bcrypt.hash(password, salt);

      await user.save();

      // Return jsonwebtoken
      const payload = {
        user: {
          id: user.id,
        },
      };

      jwt.sign(
        payload,
        config.get('jwtSecret'),
        { expiresIn: '5 days' },
        (err, token) => {
          if (err) throw err;
          res.json({ token });
        }
      );
    } catch (error) {
      console.error(error.message);
      res.status(500).send('Server error');
    }
  }
);

// @route    POST /login
// @desc     Authenticate user & get token
// @access   Public

app.post(
  '/login',
  check('email', 'Please include a valid email').isEmail(),
  check('password', 'Password is required').exists(),
  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({
        errors: errors.array(),
      });
    }

    const { email, password } = req.body;

    try {
      // See if user exists
      let user = await User.findOne({ email });

      if (!user) {
        return res
          .status(400)
          .json({ errors: [{ msg: 'Invalid credentials' }] });
      }

      const isMatch = await bcrypt.compare(password, user.password);

      if (!isMatch) {
        return res
          .status(400)
          .json({ errors: [{ msg: 'Invalid credentials' }] });
      }

      // Return jsonwebtoken
      const payload = {
        user: {
          id: user.id,
        },
      };

      jwt.sign(
        payload,
        config.get('jwtSecret'),
        { expiresIn: '5 days' },
        (err, token) => {
          if (err) throw err;
          res.json({ token });
        }
      );
    } catch (err) {
      console.error(err.message);
      res.status(500).send('Server error');
    }
  }
);

// @route    GET /profile
// @desc     Get full user profile
// @access   Private

app.get('/profile', auth, async (req, res) => {
  try {
    let user = await User.findOne({ user: req.user.id }).select('-password');

    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server error');
  }
});

// @route    POST /profile/edit/:id
// @desc     edit profile
// @access   Private

app.put('/profile/edit/:id', upload.single('image'), auth, async (req, res) => {
  const { name, bio, email, phone, password } = req.body;

  try {
    let user = await AuthUser.findById(req.params.id);

    // Delete image from cloudinary
    if (user.cloudinary_id !== '')
      await cloudinary.uploader.destroy(user.cloudinary_id);

    // Upload image to cloudinary
    let result;
    if (req.file) {
      result = await cloudinary.uploader.upload(req.file.path);
    }

    const data = {
      name: name || user.name,
      avatar: (result && result.secure_url) || user.avatar,
      bio: bio || user.bio,
      email: email || user.email,
      phone: phone || user.phone,
      password: password || user.password,
      cloudinary_id: (result && result.public_id) || user.cloudinary_id,
    };

    if (password !== '') {
      // Encrypt password
      const salt = await bcrypt.genSalt(10);

      data.password = await bcrypt.hash(password, salt);
    }

    //   Update
    user = await User.findByIdAndUpdate(req.params.id, data, { new: true });

    return res.json(data);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('Server error');
  }
});

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

Answer 1

在 /profile 路由上，什么是

await User.findOne({ user: req.user.id }).select('-password');

回歸？

在我看來，好像您正在嘗試查找“用戶”屬性為 id 的用戶，但您的用戶 model 沒有此類屬性。 所以嘗試用

await User.findById(req.user.id);

我假設 mongoose 為您的文檔創建 ObjectID。