如何在MERN中只显示用户登录后的特定页面

Question

我想要的是在登录时显示关于我们的用户信息页面，否则将用户重定向到登录页面。现在当我尝试访问关于我们的页面没有登录，我被发送到登录页面，但即使登录后，我仍然被发送到登录页面。about.js代码(前端)

import React,{useState,} from 'react';
import {ToastContainer,toast} from "react-toastify";
import axios from "axios";
import {useNavigate} from "react-router-dom";
const Login = () => {
const [email,setEmail] = useState("");
const [password,setPassword] = useState("");
const navigate = useNavigate();  // useHistory is now useNavigate
const submitted = async(e) =>{
e.preventDefault();
try{
const user = await axios.post('/login',{email:email,password:password});
// console.log(user.data.userDetails);
// console.log(user);
if(user.status===400){                        //cors error not solved (proxy added in package.json file)
// console.log("Error");
toast.error("Invalid Credentials", {
position: "top-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
}else if(user.status===200){
/* 
console.log(email+"n"+password);
*/
navigate("/");  // useHistory is now useNavigate
}
}catch(e){
console.log(e.message);
}
}
return (
<>
<div className="login-container">
<div className="toastcontainer"><ToastContainer></ToastContainer></div>
<form onSubmit={(e)=>{submitted(e)}} class="form" method="POST">
<h2>Login</h2>
<div class="inputs">
<input value={email} onChange={(e)=>setEmail(e.target.value)} type="text" required name="userName" id="userName" />
<label htmlfor="userName">User Name</label>
</div>
<div class="inputs">
<input value={password} onChange={(e)=>setPassword(e.target.value)} type="password" required name="pass" id="pass" />
<label htmlfor="pass">Password</label>
</div>
<input type="submit" value="login" class="submit-button" />
<a href="#forgotPass" class="forgotPassword">Forgot Password</a>
</form>
</div>
<div id="forgotPass">
<form action="" class="form" method="get">
<a href='#'  class="close" > &times; </a>   { /*&times will produce a cross(x)  */ } 
<h3>Reset Password</h3>
<div class="inputs">
<input type="email" required name="email" id="email" />
<label for="email">Email</label>
</div>
<button type="submit" value="Submit" class="submit-button" />
</form>
</div>
</>
)
}
export default Login

认证中间件代码:

const jwt = require("jsonwebtoken");
const User = require("../model/usersScheme");
const Authenticate = async (req,res,next) => {
try{
const token = req.cookies.jwtoken;
const verifyingToken = jwt.verify(token,process.env.SECRET_KEY);
const rootUser = await User.findOne({_id:verifyingToken._id,"tokens.token":token})
if(!rootUser){
throw new Error ("User does not exist") 
}
req.token = token;
req.rootUser = rootUser;
req.userId = rootUser._id;
next();
}catch(error){
console.log("in authenticatennnnnnnnn"+error);
res.status(401).send(error);
}
}
module.exports = Authenticate;

Route.js代码:

router.get("/about",authenticate,(req,res)=>{
res.send(req.rootUser);
// ("Form about us page");
})
module.exports = router;  

这是我在控制台上得到的错误loadaboutUs错误:请求失败，状态码401

误差

Answer 1

这不是作为MERN开发人员进行身份验证的最佳方式，相反，您最好使用cookie从首次获取请求获取身份验证信息，你可以在passport.js的帮助下轻松做到这一点，祝你好运…