cookie - Vue2前端项目中Token的存储和过期时间设置方法？

Question

vue2项目前端，token的存放以及设置过期时间？

是选择存放在cookie中设置过期时间，还是存放在localStorage中设置过期时间，哪一个更符合需求，ps：前端初入行，没使用过cookie，不太了解，平时只用localStorage

Answer 1

放cookie好一点。
1.添加 HttpOnly 和 Secure 属性能确保只在HTTPS连接下传输、防止客户端脚本访问，可以防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF），因为外部JS是可以直接访问localStorage的，而不能直接访问cookie（一些情况下写是可以的，但是cookie改了也没法成功请求资源）。
2.放cookie只需要设置过期时间就可以，到时间了浏览器自动清除了；放localStorage的话你得在程序里手动添加和手动删除不然就一直存在浏览器里。
3.放localStorage的话一般只适用于在单页应用中本地存储token，用于保持用户的登录状态，退出登录状态的话要清掉。
4.localStorage里可以放一些本地化的配置或者缓存数据，不同的浏览器可以存的cookie大小不一致，但是也比cookie要大。

Answer 2

token设置到cookie里就可以了

const token = '123';//设置cookiefunction setCookie(name, value, days) {    let date = new Date()    date.setDate(date.getDate() + days)    document.cookie = name + '=' + value + ';expires=' + date;}//获取cookiefunction getCookie(arg) {    var cookie = {};    var cookieStr = window.document.cookie;    if (!cookieStr) {      cookie[arg] = '';    } else {      cookieStr.replace(/\s+/g, '').split(';').map((item, index) => {        cookie[item.split('=')[0]] = item.split('=')[1];      });    }    return cookie[arg];}//删除cookiefunction removeCookie(name) {    setCookie('name', 18, -1)}//修改cookiefunction changeCookie() {    document.cookie = 'along=1234'}

设置token

setCookie('Token', token, 1 )

Answer 3

token 应该使用 cookie 储存，并设置 HttpOnly 和 Secure