当我刷新在react和express.js中创建的页面并将其部署到RAILWAY中的生产时,我的身份验证cookie消失了

问题描述 投票:0回答:1

我有这个中间件功能 cookie 使用 jwt 在 Express 中创建:

export const createAccessToken = async (payload) => {
  return new Promise((resolve, reject) => {
    jwt.sign(payload, TOKEN_SECRET, { expiresIn: "1d" }, (err, token) => {
      if (err) reject(err);
      resolve(token);
    });
  });
};

当我登录时,httpOnly 会被提交,因为它在本地主机和生产环境中不起作用

const token = await createAccessToken({
      id: userFound._id,
    });

    res
      .cookie("access_token", token, {
        //httpOnly: true,
        secure: true,
        sameSite: "None",
        domain: DOMAIN,
      })
      .status(200)

我还使用 Express 并使用 CORS、app.use( 科尔斯({ 凭证:真实, 来源:[FRONTEND_URL], }) );, 我对 CORS 没有任何问题。 在反应中,我使用 useContext 和 axios 进行身份验证: 我声明 withCredencials TRUE,

import axios from "axios";
import { API_URL } from "../config";

const instance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
});

export default instance;
import { useEffect } from "react";
import { createContext, useContext, useState } from "react";
import {
  loginRequest,
  registerRequest,
  verifyTokenRequest,
  logoutRequest,
  verifyEmailRequest,
  verifyEmailTokenRequest,
} from "../api/auth";
import Cookies from "js-cookie";

const AuthContext = createContext();

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) throw new Error("useAuth must be used within a AuthProvider");
  return context;
};

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState({});
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [errors, setErrors] = useState([]);
  const [loading, setLoading] = useState(true);

  // clear errors after 5 seconds
  useEffect(() => {
    if (errors.length > 0) {
      const timer = setTimeout(() => {
        setErrors([]);
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [errors]);

  const signup = async (user) => {
    try {
      const res = await registerRequest(user);
      if (res.status === 200) {
        setUser(res.data);
        setIsAuthenticated(true);
      }
    } catch (error) {
      console.log(error);
      setErrors(error.response.data.message);
    }
  };

  const signin = async (user) => {
    try {
      const res = await loginRequest(user);
      setUser(res.data);
      setIsAuthenticated(true);
    } catch (error) {
      console.log(error);
      setErrors(error.response.data.message);
    }
  };

  const verifyEmail = async (data) => {
    try {
      const res = await verifyEmailRequest(data);
      return res.data;
    } catch (error) {
      console.log(error);
      setErrors(error.response.data.message);
    }
  };

  const verifyEmailToken = async (data) => {
    try {
      const res = await verifyEmailTokenRequest(data);
      return res.data;
    } catch (error) {
      console.log(error);
      setErrors(error.response.data.message);
    }
  };

  const logout = async () => {
    Cookies.remove("access_token");
    setUser(null);
    setIsAuthenticated(false);
  };

  useEffect(() => {
    const checkLogin = async () => {
      const token = Cookies.get("access_token");
      if (!token) {
        setIsAuthenticated(false);
        setLoading(false);
        return;
      }

      try {
        const res = await verifyTokenRequest(token);
        if (!res.data) return setIsAuthenticated(false);
        setIsAuthenticated(true);
        setUser(res.data);
        setLoading(false);
      } catch (error) {
        setIsAuthenticated(false);
        setLoading(false);
      }
    };
    checkLogin();
  }, []);

  return (
    <AuthContext.Provider
      value={{
        user,
        signup,
        signin,
        verifyEmail,
        verifyEmailToken,
        logout,
        isAuthenticated,
        errors,
        loading,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;
``` in my localhost when I refresh my page is working and when I deploy in Railway and i refresh the deployed page when I was loged, the cookies was deleted and and my login is not maintaining the same as on my localhost. 
PD. 

httpOnly:正确, 安全:真实, 同一站点:“无”,

I try to do this and is not working, help me please


I hope the cookies remain in production when I refresh my page.
reactjs express cookies react-context third-party-cookies
1个回答
1
投票

您可以创建持久性cookie。当浏览器关闭时它们不会被删除。只需在发送 cookie 时设置

expires
值即可。

const token = await createAccessToken({
      id: userFound._id,
    });

    res
      .cookie("access_token", token, {
        //httpOnly: true,
        secure: true,
        sameSite: "None",
        domain: DOMAIN,
        expires: TIME // Expiry date of the cookie in GMT. If not specified or set to 0, creates a session cookie.
      })
      .status(200)

阅读此内容以获取更多信息:

https://www.w3schools.com/js/js_cookies.asp

https://expressjs.com/en/5x/api.html#res.cookie

© www.soinside.com 2019 - 2024. All rights reserved.