Eggjs 中Cookie 配置和使用

Cookie

HTTP 请求都是无状态的，但是我们的 Web 应用通常都需要知道发起请求的人是谁。为了解决这个问题，HTTP 协议设计了一个特殊的请求头：Cookie。服务端可以通过响应头（set-cookie）将少量数据响应给客户端，浏览器会遵循协议将数据保存，并在下次请求同一个服务的时候带上（浏览器也会遵循协议，只在访问符合 Cookie 指定规则的网站时带上对应的 Cookie 来保证安全性）。

全局配置

public/user.js

const login = () => {
  fetch('/login', {
    method: 'post',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify({
      name: 'admin',
      pwd: 'admin',
    }),
  });
};

controller/user.js

async login() {
  const { ctx } = this;
  const body = ctx.request.body;
  ctx.cookies.set('user', JSON.stringify(body));
  //这里就是响应
  ctx.body = {
    status: 200,
    data: body,
  };
}

egg 集成了 操作 cookie 的方法在ctx 中。

还要记得配置路由

router.post('/login', controller.user.login);

开发者工具显示

响应

Cookie

想在视图中展示——即在 html 中拿到 cookies 中的数据：

<% if(user){ %>
    已经登录：<%= user.name %>
    <% }else{ %>
    未登录
    <% } %>

controller/user

async index() {
    const { ctx } = this;
    // ctx.body = 'hi, user index';
    const user = ctx.cookies.get('user'); //**
    await ctx.render(
      'user.html',
      {
        id: 100,
        name: 'admin',
        lists: ['java', 'php'],
        user: user ? JSON.parse(user) : null, //**
      },
      {
        delimiter: '%',
      }
    );
  }

注销

async logout() {
    const { ctx } = this;
    ctx.cookies.set('user', null);
    ctx.body = {
      status: 200,
    };
  }

但此时从开发者工具中查看 cookies是实时更新了，页面却没有实时更新
再到前面 login、logout 里面的 fetch 连接then—— fetch 返回 Promise

const logout = () => {
  fetch('/logout', {
    method: 'post',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify({}),
  }).then(() => {
    location.reload();
  });
};

ctx.cookies.set 配置项

配置时间

ctx.cookies.set('user', JSON.stringify(body), {
      maxAge: 1000 * 60, //cookie 保留一分钟
          httpOnly: true
    });

cookies 属性 httpOnly： √ 表示只能从服务端操作该 cookies ，而不能在前端js 操作 cookies

设置中文 Cookies

如果你直接这样

  ctx.cookies.set('ch', '中文');

那么浏览器就会直接报错

方法一 加密

你可以选择进行加密：

ctx.cookies.set('zh', '中文', {
      encrypt: true,
    });

加密后就不是中文了，自然就可行了
此时如果直接访问

const zh = ctx.cookies.get('zh');
console.log(zh);

结果是 undefined
解密

ctx.cookies.set('zh', '中文', {
  encrypt: true,
});
const zh = ctx.cookies.get('zh', {
  encrypt: true,
});
console.log(zh);

方法二 base64 编码

class UserController extends Controller {
  encode(str) {
    return new Buffer(str).toString('base64');
  }
  decode(str) {
    return new Buffer(str, 'base64').toString;
  }
  //...
  async index(){
  //...
    ctx.cookies.set('base64', this.encode('中文base64'));
    const base64 = this.decode(ctx.cookies.get('base64'));
    console.log(base64);
  }