Я могу просто ввести любое имя пользователя в url, и тот же компонент будет отображаться в сообщениях пользователя, вошедшего в систему. Например, когда я вошел в систему как rick, я могу видеть свой фид как http://localhost:3000/profile/Rick/posts, но если я наберу url с любой строкой, числом или чем-то еще, он все равно будет визуализировать компонент. Как и http://localhost:3000/profile/xcxcxcxcx/posts, он по-прежнему показывает те же сообщения, что и лента Рика.
Я думаю, что мне нужно подтвердить имя пользователя.
Вот мой код.
UserProfile
import React, { Component } from "react"
import { getCurrentUser } from "../actions/userActions"
import { connect } from "react-redux"
import { Link } from "react-router-dom"
class UserProfile extends Component {
componentDidMount() {
const authToken = localStorage.getItem("authToken")
this.props.dispatch(getCurrentUser(authToken))
}
render() {
const { isIdentifyingToken, username, email } = this.props
return (
<div>
{isIdentifyingToken ? null : (
<div className="card">
<div className="card-content">
<div className="media">
<div className="media-left">
<figure className="image is-48x48">
<img
src="https://bulma.io/images/placeholders/96x96.png"
alt="Placeholder image"
/>
</figure>
</div>
<div className="media-content">
<p className="title is-4">{username}</p>
<p className="subtitle is-6">{email}</p>
</div>
</div>
<Link to={`/profile/${username}/posts`}>My Posts</Link>
<br></br>
</div>
</div>
)}
</div>
)
}
}
const mapStateToProps = state => {
return {
isIdentifyingToken: state.auth.isIdentifyingToken,
username: state.auth.user.username,
email: state.auth.user.email,
id: state.auth.user._id
}
}
export default connect(mapStateToProps)(UserProfile)
UserFeed
import React, { Component } from "react"
import { getUserPosts, getCurrentUser } from "../actions/userActions"
import { connect } from "react-redux"
import Cards from "./Cards"
class UserFeed extends Component {
componentDidMount() {
const authToken = localStorage.getItem("authToken")
if (authToken) {
this.props.dispatch(getCurrentUser(authToken))
if (this.props && this.props.userId) {
this.props.dispatch(getUserPosts(this.props.userId))
} else {
return null
}
}
}
render() {
const { isFetchingUserPosts, userPosts } = this.props
return isFetchingUserPosts ? (
<p>Fetching....</p>
) : (
<div>
{userPosts &&
userPosts.map((post) => {
return <Cards key={post._id} post={post} />
})}
</div>
)
}
}
const mapStateToPros = (state) => {
return {
isFetchingUserPosts: state.userPosts.isFetchingUserPosts,
userPosts: state.userPosts.userPosts,
userId: state.auth.user._id,
}
}
export default connect(mapStateToPros)(UserFeed)
Cards
import React, { Component } from "react"
import { connect } from "react-redux"
import { compose } from "redux"
import { withRouter } from "react-router-dom"
class Cards extends Component {
render() {
const {title, description } = this.props.post
return (
<div className="card">
<div className="card-content">
<div className="media">
<div className="media-left">
<figure className="image is-48x48">
<img
src="https://bulma.io/images/placeholders/96x96.png"
alt="Placeholder image"
/>
</figure>
</div>
<div className="media-content" style={{ border: "1px grey" }}>
<p className="title is-5">{title}</p>
<p className="content">{description}</p>
</div>
</div>
</div>
</div>
)
}
}
const mapStateToProps = state => {
return state
}
export default compose(withRouter, connect(mapStateToProps))(Cards)
У меня есть внутренний маршрут, который проверяет пользователя следующим образом: (он просто извлекает декодированный объект из токена, который содержит userId и проверяет пользователя)
identifyUser: async (req, res, next) => {
try {
const userId = req.user.userId
const user = await User.findOne({ _id: userId })
if (!user) {
return res.status(500).json( {error: "No user found "})
}
return res.status(200).json( { user })
} catch(error) {
return next(error)
}
}
I'm не уверен, как мне проверить имя пользователя в параметрах: (
Редактировать : App.js
render() {
return (
<div>
<Router>
<Switch>
<Route exact path="/" component={LandingPage} />
<Route path="/register" component={RegistrationForm} />
<Route path="/login" component={LoginForm} />
<PrivateRoute path="/feed" component={Feed} />
<PrivateRoute path="/post/new" component={NewForm} />
<PrivateRoute path="/post/edit/:id" component={EditForm} />
<PrivateRoute exact path="/profile/:username" component={UserProfile} />
<PrivateRoute path="/profile/:username/posts" component={UserFeed} />
<Route component={NotFoundPage} />
</Switch>
</Router>
</div>
)
}