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

Question

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

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

Answer 1

token设置到cookie里就可以了

const token = '123';

//设置cookie
function setCookie(name, value, days) {
    let date = new Date()
    date.setDate(date.getDate() + days)
    document.cookie = name + '=' + value + ';expires=' + date;
}

//获取cookie
function 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];
}

//删除cookie
function removeCookie(name) {
    setCookie('name', 18, -1)
}

//修改cookie
function changeCookie() {
    document.cookie = 'along=1234'
}

设置token

setCookie('Token', token, 1 )

Answer 2

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

Answer 3

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