我正在通過devchallenges.io上的完整堆疊認證，并且正在進行身份驗證應用程式挑戰。到目前為止，我已經能夠創建登錄和注冊功能，并且能夠設定功能來獲取登錄用戶并顯示他們的資訊以及用戶在注冊或登錄時更新他們的個人資料的功能一個用戶，無論哪個用戶登錄，都會顯示同一用戶的個人資料資訊。我附上了一個指向織機視頻的鏈接來演示這個問題。此外，。我附上了 github 源代碼鏈接。
https://www.loom.com/share/c464f456751a45068110e699f796e11d
https://github.com/gbopola/Auth-App
組態檔.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}`));
uj5u.com熱心網友回復：
在 /profile 路由上，什么是
await User.findOne({ user: req.user.id }).select('-password');
回來？
在我看來，好像您正在嘗試查找“user”屬性是 id 的用戶，但是您的 User 模型沒有這樣的屬性。所以嘗試用
await User.findById(req.user.id);
我假設貓鼬為您的檔案創建了 ObjectID。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/374096.html
標籤：javascript 节点.js 反应 表达 还原