[Day 27] - React 前端串後端 - Cookie存取

目前在浏览器储存使用者资料的主流方式有两种，
一种是存local storage、一种是存在Cookie里面，
其他还有trust token、web sql等等的这里就先不提

透过浏览器的开发者工具(f12)，可以看到这个网站存了哪些东西在什麽地方

在React中，我们可以直接用js呼叫localStorage来操作资料的存取，
不过因为跟Cookie相比，localStorage在资安上的防御手段没有Cookie来得丰富，
所以我决定还是使用Cookie在浏览器上存取资料。

首先安装npm i universal-cookie

接着在程序中import Cookies from 'universal-cookie';

然後新增 存&取Cookie的function，还满简单的吧~

//cookie
  const cookies = new Cookies();

  export const setToken = (token) => {
  cookies.set('token', token, 
  { path: '/',secure: true,sameSite :true}
  );
  console.log(cookies.get('token'));
  };

export const getAuthToken = () => {
  if (cookies.get('token')===undefined){
    return '';
  }
  return cookies.get('token');
};

这三个参数分别代表:
secure: true 只能在https连线下回传Cookie
httpOnly: true 禁止透过script操作Cookie
sameSite :true 禁止跨站回传Cookie

我原本在这个Cookie里面有加上Optional的参数httpOnly: true，
但是发现加上去的话我就没办法在前端存取Cookie内的token了...

如果不加上httpOnly: true，就表示javascript可以对Cookie做操作，
虽然有另外两个参数，但安全性还是大大降低，因此另外还需要透过其他header来做资安上的补强

下次来试试看trust token api好了