用户 session 未通过 React hooks 持久化

Question

我试图通过服务器端身份验证保持当前用户登录刷新。 我正在使用 UseEffect() function 来执行此操作，我在刷新时进行验证。 我的问题是，每当我刷新时，我的服务器都会打开和关闭用户 session。 这意味着一次刷新将读取没有 session，而另一次刷新将读取用户 session，依此类推。 我希望我的 app.js 始终读取代码以始终读取 'auth:true' 假设用户已登录。

服务器端：

---

index.js

app.use(express.json()); //Parsing Json

app.use(cors({   //Parsing origin of the front-end
   origin: ["http://localhost:3000"], 
   methods: ["GET", "POST"],
   credentials: true   //Allows cookies to be enabled
}));  

app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: true }));

 app.use(
  session({
    key: "userID",
    secret: "subscribe",    //Normally this has to be long and complex for security
    resave: false,
    saveUninitialized: false,
    cookie: {  //How long will the cookie live for?
      expires: 60 * 60 * 1000, //Expires after one hour
    }
  }));

 app.post('/isUserAuth', (req, res) => { //Where we Authenticate session 

  const token = req.body.token;

  jwt.verify(token, "jwtSecret", (err, decoded) => {
    if (err) {
    res.send({auth: false, user: "No valid token!"});
    } 
    else if (!req.session.user) {
      res.send({auth: false, user: "empty user"});
      console.log(req.session.user)
    }
    else  { //Else if user is verified, we send confirmed authentication and user data
    res.send({auth: true, user: req.session.user});
    console.log(req.session.user)
    }
})
});

客户端：

---

应用程序.js

const userAuthToken = localStorage.getItem('token'); 
  
  useEffect(() => { //Stay logged in, if user is logged in, after refresh
    Axios.post("http://localhost:3001/isUserAuth", {   //End-point for creation request
    token: userAuthToken
   
    }).then(response => {
      if (!response.data.auth) { //checking for auth status
        setAuthStatus(false); //User isnt logged in!
        console.log("NOT LOGGED IN!");
        console.log(response.data.user);
       } else {
        setAuthStatus(true);      //User is logged into session!
        console.log("LOGGED IN!");
        console.log(response.data.user);
       }
    })
  }
  ,[]);

Answer 1

这里的问题是您没有通过 Axios 请求从客户端发送凭据。 由于您的服务器应用程序具有凭据：是的，因此您应该在客户端中执行相同的操作。

我的建议是将 {withCredentials: true} 添加到客户端的 Hook 中。

  useEffect(() => { 

    const token = localStorage.getItem('token');

    Axios.post("http://localhost:3001/isUserAuth", {  
    token: token, 
    },{withCredentials: true} /*<<Insert this*/).then(response => {
      if (!response.data.auth) { 
        setAuthStatus(false); 
        console.log("NOT LOGGED IN!");
        console.log(response.data.user);
       } else {
        setAuthStatus(true);  
        console.log("LOGGED IN!");
        console.log(response.data.user);
       }
    })
  }
  ,[]);

Answer 2

这是由于您的 userToken 在重新加载时未定义。 请参阅有关在本地存储上设置令牌的相关问题。