如何在react中设置 cookie？

IT技术 reactjs cookies
2021-04-09 03:55:29

最初，我使用以下ajax来设置cookie。 

function setCookieAjax(){
  $.ajax({
    url: `${Web_Servlet}/setCookie`,
    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
    headers: { 'Access-Control-Allow-Origin': '*',
               'username': getCookie("username"),
              'session': getCookie("session")
    },
    type: 'GET',
    success: function(response){
      setCookie("username", response.name, 30);
      setCookie("session", response.session, 30);}
  })
}

function setCookie(cname, cvalue, minutes) {
    var d = new Date();
    d.setTime(d.getTime() + (minutes*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

export const getUserName = (component) => {
    setCookieAjax()
 $.ajax({
    url: `${Web_Servlet}/displayHeaderUserName`,
    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
    headers: { 'Access-Control-Allow-Origin': '*',
                'username': getCookie("username"),
                'session': getCookie("session")
            },
    type: 'GET',
    success: function(response){
        component.setState({
        usernameDisplay: response.message
        })
   }.bind(component)
 })
}

现在，我想使用 servlet 的添加 cookie 功能来设置 cookie。但我不知道如何达到我的目的。

Cookie loginCookie = new Cookie("user",user);  //setting cookie to expiry in 30 mins
        loginCookie.setMaxAge(30*60);
        loginCookie.setDomain("localhost:4480");
        loginCookie.setPath("/");

response.addCookie(loginCookie);

为了延长cookie时限，我应该在react端写什么来接收cookie的会话时间？

6个回答

看来以前存在于react-cookienpm 包中的功能已移至universal-cookie. 通用 cookie 存储库中的相关示例现在是：

import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('myCat', 'Pacman', { path: '/' });
console.log(cookies.get('myCat')); // Pacman
@KS npm install universal-cookie？检查消息中的路径。如果它不在那里，你还没有安装它。
2021-05-25 03:55:29
嗨，我已经安装了这个包，但是在导入时遇到一些错误错误：ENOENT：没有这样的文件或目录，打开“D:\XXX project\user 22 oct\Application1\node_modules\universal-cookie\node_modules\cookie\index.html”。 js'
2021-06-05 03:55:29
这个包有一些问题。只要您没有重新加载页面，您就可以访问 cookie。重新加载后，你会得到undefined（可能是因为线路var cookies = new Cookies()，我不知道）。好累啊 我在这个问题上花了一天时间，但还没有答案。我要改变我的饼干包。
2021-06-16 03:55:29

使用 vanilla js，示例

document.cookie = `referral_key=hello;max-age=604800;domain=example.com`

阅读更多信息：https : //developer.mozilla.org/en-US/docs/Web/API/Document/cookie

我使用 react-cookie 库在 React 中设置 cookie，它有一些选项，您可以传入选项来设置过期时间。

检查出来这里

它在您的案例中的使用示例：

import cookie from "react-cookie";

setCookie() => {
  let d = new Date();
  d.setTime(d.getTime() + (minutes*60*1000));

  cookie.set("onboarded", true, {path: "/", expires: d});
};
看来 react-cookie 包已更新（破坏）此解决方案中使用的 API。+1 链接，我在下面发布了更新的答案。
2021-06-02 03:55:29

小更新。有一个钩子可用于 react-cookie

1）首先，安装依赖（只是为了说明）

yarn add react-cookie

或者 

npm install react-cookie

2）我的使用示例：

// SignInComponent.js
import { useCookies } from 'react-cookie'

const SignInComponent = () => {

// ...

const [cookies, setCookie] = useCookies(['access_token', 'refresh_token'])

async function onSubmit(values) {
    const response = await getOauthResponse(values);

    let expires = new Date()
    expires.setTime(expires.getTime() + (response.data.expires_in * 1000))
    setCookie('access_token', response.data.access_token, { path: '/',  expires})
    setCookie('refresh_token', response.data.refresh_token, {path: '/', expires})

    // ...
}

// next goes my sign-in form

}

希望它有帮助。

非常感谢改进上述示例的建议！

响应变量有什么作用，它得到什么值？还有哪里是设置令牌的理想位置，以便在 cookie 过期后将用户注销。登录表单或主页？
2021-06-06 03:55:29

一个非常简单的解决方案是使用 sfcookies 包。你只需要使用 npm 安装它，例如： npm install sfcookies --save

然后导入文件：

import { bake_cookie, read_cookie, delete_cookie } from 'sfcookies';

创建一个 cookie 密钥：

const cookie_key = 'namedOFCookie';

在您的提交功能上，您通过在其上保存数据来创建 cookie，就像这样：

bake_cookie(cookie_key, 'test');

删除它只是做

delete_cookie(cookie_key);

并阅读它：

read_cookie(cookie_key)

简单易用。

我已经尝试过了react-cookie，universal-cookie经过一天的这些包的undefined结果挣扎cookies.get("cookie_name")，我终于遇到了这个解决方案，并且这个包sfcookies对我有用。太感谢了！你救了我！
2021-06-03 03:55:29
其它你可能感兴趣的问题
上一篇Om 但在 javascript 中 下一篇使用 TypeScript 在 useState React Hook 上设置类型