关于Token和Cookie做权限校验的区别及Token自动续期方案

Token和Cookie的区别

首先，要知道一些基本概念：http是无状态的，session是存储在服务端的数据，每次用户在发起http请求到服务器时会在cookie中带上一个session id，服务端通过这个session id来判断用户是哪一个，cookie就是在浏览器端存储数据的一种方式，可以在服务器端通过在header中通过添加set-cookie来通知浏览器端添加cookie

Token和Cookie的对比

• Token可以在http请求的任何地方加上，比如header、body、url，而cookie存储的地方是固定的
• Token可以在需要验证的接口才加上token，而cookie则会在每次请求都会自动加上
• Cookie会存在跨域问题，如果Cookie是在aaa.example上创建的，那么在bbb.example下也是不允许访问的，而Token不存在这个问题，只要在请求内带上token就可
• Token天生就可以避免CSRF伪造站点攻击(毕竟发起请求是否携带Token全靠自己写逻辑)，而Cookie默认是自动携带的，因此在不注意的情况下很容易遭受攻击

在 CSRF 攻击中，恶意网站利用浏览器会自动将身份验证 cookie 附加到对该域的请求的事实，并诱使您的浏览器执行请求

关于这方面，Cookie也是有办法解决CSRF攻击的，可以阅读这篇文章了解：https://www.invicti.com/blog/web-security/same-site-cookie-attribute-prevent-cross-site-request-forgery/

综上所述，使用Token明显灵活性更强，不过使用Token的话还存在一个问题就是Token如何做自动续期，

Token续期方案

方案一：axios拦截器

本方法的思路是在axios的响应拦截器内判断服务端返回的错误结果，如果是token过期（比如http code是401或多少），那么调用刷新token的函数，在刷新token成功后再次发起请求，伪代码大概是这样的：

async function refreshToken(){
	const data=await axios.get('http://xxx.xxx.xxx/api/refreshToken?oldToken='+oldToken);
	localStorage.AddItem("Token","Bearer "+data.newToken);
}



request.interceptors.response.use(resp => {
    return resp;
},async err=>{
    if(err.reponse.status==401)
    {
		await refreshToken();
        
		err.config.headers.Authorization = localStorage.GetItem("Token");
        return request(err.config);// 发起新请求 请求的参数还是原来的url和数据
    }
});

最好加个RefreshToken，普通的Token过期时间短，RefreshToken过期时间长，用RefreshToken获取新的Token，减少Token暴露的风险

方案二：定时器

async function refreshToken(){
	const data=await axios.get('http://xxx.xxx.xxx/api/refreshToken?oldToken='+oldToken);
    localStorage.RemoveItem("Token");
	localStorage.AddItem("Token","Bearer "+data.newToken);
}

this.setInterval(refreshToken,1000*60*25);// 25分钟调用一次

把上面的内容放在一个js文件内，在App.vue中引入这个js文件，如果token是30分钟过期，可以25分钟(不能比30分钟长)调用一次刷新函数去服务端获取新的token替换掉老的token