双token概念：
在Vue项目中，双Token设计通常是指前端使用两个Token来进行身份验证，一个是Access Token，用于访问受保护的资源；另一个是Refresh Token，用于刷新Access Token。以下是实现思路和代码示例:
Access Token：
Access Token是一个短期的、有限制的Token，用于访问受保护的资源。在Vue项目中，我们通常将Access Token保存在浏览器的本地存储中，例如localStorage。在每次请求受保护的资源时，前端需要将Access Token添加到请求头中，以便后端进行身份验证。以下是示例代码：
//在请求头中添加Access Token
axios.interceptors.request.use(config => {
const accessToken = localStorage.getItem('accessToken')
if (accessToken) {
config.headers.Authorization = `Bearer ${accessToken}`
}
return config
})
在上述代码中，我们通过axios拦截器，在每次请求前自动添加Access Token到请求头中。如果本地存储中不存在Access Token，后端会返回401状态码，前端需要重新登录。
Refresh Token：
Refresh Token是一个长期的、不受限制的Token，用于刷新Access Token。在Vue项目中，我们通常将Refresh Token保存在HttpOnly的Cookie中，以增加安全性。在Access Token过期时，前端需要发送一个请求到后端，使用Refresh Token来获取新的Access Token。以下是示例代码：
在请求头中添加Refresh Token
axios.interceptors.request.use(config => {
const refreshToken = Cookies.get('refreshToken')
if (refreshToken) {
config.headers.RefreshToken = refreshToken
}
return config
})
// 在响应头中获取新的Access Token并保存到本地存储中
axios.interceptors.response.use(response => {
const newAccessToken = response.headers.newaccesstoken
if (newAccessToken) {
localStorage.setItem('accessToken', newAccessToken)
}
return response
})
在上述代码中，我们通过axios拦截器，在每次请求前自动添加Refresh Token到请求头中。在后端返回响应时，如果存在新的Access Token，前端需要将其保存到本地存储中，以便下次访问受保护的资源时使用。
需要注意的是，Refresh Token的安全性非常重要，如果Refresh Token泄露，攻击者可以使用它来获取新的Access Token，从而获取受保护的资源。因此，我们需要采取一些措施来保护Refresh Token的安全性，例如使用HttpOnly的Cookie、定期更换Refresh Token等。
httponly
HttpOnly是一种设置在Cookie中的标志，它告诉浏览器不要允许脚本访问Cookie。这样可以有效地减少跨站点脚本攻击（XSS）的风险，因为攻击者无法通过脚本获取到用户的Cookie，从而无法进行Cookie劫持等攻击。HttpOnly的Cookie只能通过HTTP协议发送给服务器，不能通过脚本或其他非HTTP协议进行访问。
在前端代码中，无法直接设置HttpOnly标志，因为这个标志是由服务器在设置Cookie时设置的。
示例代码如下：
//在Node.js中，可以通过设置Cookie的httpOnly属性来设置HttpOnly标志。
res.cookie('name', 'value', { httpOnly: true }); // 设置HttpOnly标志
双token应用场景：
双Token设计通常用于需要身份验证的Web(pc h5 app 小程序)应用程序，特别是涉及到敏感数据或操作的应用程序。例如，电子商务网站、社交媒体应用程序、在线银行应用程序等。这些应用程序通常需要用户登录后才能访问受保护的资源，因此需要使用Access Token来验证用户身份。同时，为了增加安全性，Access Token的有效期通常比较短，需要定期刷新。为了实现Access Token的刷新，我们通常使用Refresh Token，它可以在Access Token过期时用来获取新的Access Token。因此，双Token设计可以提高Web应用程序的安全性和用户体验。
网友评论