如何使用 Node JS 将经过身份验证的用户传递到新视图

Question

我的应用程序的流程是使用 NodeJS/Express 和 React 登录，创建一个拥有 JWT 令牌的用户，然后在应用程序上点击授权路由。由于我对此有点陌生，因此我无法理解如何利用我刚刚在注册页面上创建的用户，然后将该用户推送到我仍然可以获取其信息的主页。这是一些样板

创建用户 在这种情况下，req.body 将类似于 { 用户名：我，电子邮件：[e-mail]，密码：hashed_pw }

router.post('/users', async (req, res) => {
const user = new User(req.body)
try {
await user.save()
const token = await user.generateAuthToken()
res.status(201).send({user: user, token: token})
} catch (e) {
res.send({"error": "Unable to create"})
}
})

身份验证中间件

const auth = async (req, res, next) => {
try {
const token = req.header('Authorization').replace('Bearer ', '')
const decoded = jwt.verify(token, 'mysecret')
const user = await User.findOne({ _id: decoded._id, 'tokens.token': token })
if (!user) {
throw new Error()
}
console.log('user', user)
req.token = token 
req.user = user
next()
} catch (e) {
// res.status(401).send({ error: 'Please authenticate.' })
res.send({ error: 'Please authenticate.' })
}
}

"主页"的后端路由 - 请注意，首先运行"auth"中间件方法。身份验证方法将在 req 中返回用户

router.get('/users/me', auth, async (req, res) => {
res.send(req.user)
})

在前端 - 我会有一个简单的登录

export default function SignUp(props) {
const classes = useStyles();
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [confirmPassword, setConfirmPassword] = useState('')
const [error, setError] = useState(false)
const handleSubmit = e => {
e.preventDefault();
if (password === confirmPassword){
const newUser = {
name,
email,
password
}
axios.post('http://localhost:4000/users', newUser)
.then( (res) => 
localStorage.setItem('user', JSON.stringify(res.data.user), 
localStorage.setItem('token', JSON.stringify(res.data.token))
))
props.history.push("/journal")
} else {
setError(true)
setName('')
setEmail('')
setPassword('')
setConfirmPassword('')
}
}

return ( 
<div> My login form </div>
)

然后它会重定向到主页 - 这是我丢失登录用户信息的地方

function BlogEntryGatePage(){
const [user, setUser] = useState('')
useEffect(() => {
async function fetchData() {
const getUser = await axios('http://localhost:4000/users/me')
console.log(getUser)
}
fetchData();
});
return(
<div>
Post Login form - the /users/me route above is called when             
this component runs but i automatically hit the auth error.

</div>
)
}

我的逻辑构建方式，我需要作为经过身份验证的用户点击"users/me"路由，但是一旦 react 创建我并将我推送到下一个组件，我对"users/me"的 axios 调用就不再起作用了。

我不知道该怎么做才能解决！

Answer 1

有几种方法可以做到这一点 - 基本上你需要某种提升/共享的应用程序状态。

您可以将 JWT 存储在本地存储中，并在每个页面中获取/解码它。

您可以使用上下文 API + react 钩子在登录后保存用户详细信息并在下一页获取它们