无感刷新-双Token

为什么要做双token?

双token系统通常用于提高安全性和分离不同级别的权限。在这种系统中,通常会有两个token:

  • Access Token:这是用户直接使用来访问资源的token。它的有效期较短,一旦过期,用户需要重新认证来获取新的access token。这样做的好处是即使access token被泄露,由于其有效期短,攻击者利用它进行不当操作的时间窗口有限。
  • Refresh Token:Refresh token是用来在access token过期后重新获取新的access token的。它的有效期通常较长,甚至可以说是永久的。但是,refresh token通常不会直接发送给客户端,而是保存在服务器端。当需要刷新access token时,客户端通过提供refresh token来请求新的access token。

此外,使用双token的原因还包括:

  • 安全性:通过短期的access token和长期的refresh token,可以在不影响用户体验的情况下,减少安全风险。即使access token被盗,由于其有效期短,损害可以被控制在一定范围内。
  • 权限管理:双token系统可以更好地管理用户的权限。例如,在开放平台中,第三方应用可以通过refresh token来获取access token,而不需要知道用户的用户名和密码,这样既保证了用户信息的安全,又赋予了第三方应用一定的权限。
  • 用户体验:双token系统可以在不影响用户体验的前提下,实现后台的安全管理和策略调整。用户不需要频繁登录,同时也能保证系统的安全性。
  • 灵活性:在需要进行更细粒度的权限控制或者策略调整时,双token系统提供了更多的灵活性。例如,可以在不改变refresh token的情况下,调整access token的有效期或权限范围。

总之,双token系统是一种常见的安全设计模式,通过分离短期和长期凭证,以及用户直接使用的token和用于刷新的token,来提高系统的安全性和灵活性。这种设计特别适用于需要与第三方应用共享权限而又不泄露用户敏感信息的场景。

2 .流程图

在这里插入图片描述

3.前端代码实现 (不做要求,复制过去即可)

const refreshToken = async () => {
   
    return await axios.get('/apis/bm-member-service-app/api/member/refresh_token', {
   
        params: {
   
            refreshToken: beimao_store.refreshToken
        }
    })
        .then(function (response) {
   

            const {
    code, msg, data } = response.data
            if (code != 0) {
   
                return Promise.reject(new Error(msg));
            }

            beimao_store.token = data.token;
            beimao_store.refreshToken = data.refreshToken;
            return Promise.resolve("成功");

        })
        .catch(function (error) {
   
            return Promise.reject(new Error(error));
        });
}

<think>嗯,用户想了解Vue2中的Token无感刷新机制。首先,我需要回忆一下这个机制的基本概念。Token通常指的是使用Access Token和Refresh Token的组合来实现用户认证,避免频繁登录。用户可能已经知道单Token的缺点,比如过期后需要重新登录,体验不好。所以Token的作用就是解决这个问题,实现无感刷新。 接下来,我应该解释清楚这两个Token的不同作用。Access Token有效期短,用于接口请求,而Refresh Token有效期长,用来获取新的Access Token。这个过程需要前端在检测到Access Token过期时,自动使用Refresh Token去请求新的Token,用户不会察觉到重新登录的过程。 然后,需要考虑如何在Vue2中具体实现。可能需要用到axios的拦截器,在请求发出前检查Token是否过期。如果过期,就发起一个刷新Token的请求,获取新的Access Token后重新发送原来的请求。这里要注意并发请求的处理,避免多个请求同时触发多次Token刷新。可能需要一个队列来存储等待的请求,等Token刷新完成后一起处理。 另外,用户可能关心如何检测Token是否过期。通常有两种方法:前端根据Token的过期时间戳判断,或者后端返回401状态码触发刷新。这两种方法各有优劣,前端校验可以减少不必要的请求,但需要准确的时间同步;后端触发则更可靠,但会多一次请求失败的情况。 还要提到安全性,Refresh Token需要安全存储,比如HttpOnly的Cookie,防止XSS攻击。同时,Refresh Token的过期处理,比如用户长时间不操作后需要重新登录,这也是需要考虑的。 可能还需要给出一些代码示例,比如axios拦截器的配置,如何封装刷新Token的函数,处理并发请求等。但要注意代码的正确性和兼容性,比如在Vue2中使用this.$axios或全局的axios实例。 最后,总结一下Token的优势,比如提升用户体验,减少密码输入次数,增强安全性等。同时提醒一些注意事项,比如Token的存储方式、网络错误处理、服务端的配合等。 用户可能是前端开发者,正在寻找在Vue2项目中实现无感刷新的解决方案。他们可能已经遇到了Token过期的问题,需要具体的实现步骤和最佳实践。深层需求可能是希望提升应用的用户体验,同时保证安全性,减少维护成本。需要确保回答结构清晰,步骤明确,代码示例正确,并且覆盖可能遇到的问题和解决方法。</think>好的,我将为您分步骤解释Vue2中Token无感刷新机制的实现原理和方案: 一、核心概念 1. Token组成: - Access Token(短期令牌):有效期短(如2小时),用于接口请求 - Refresh Token(刷新令牌):有效期长(如7天),存储于HttpOnly Cookie中 二、工作原理 1. 正常流程: $$流程图$$ 用户登录 → 获取Token → 携带Access Token请求 → 正常响应 2. 过期处理: 检测Access Token过期 → 使用Refresh Token获取新Access Token → 自动重发原请求 → 用户无感知 三、具体实现步骤(Vue2版) 1. 创建axios实例 ```javascript const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) ``` 2. 请求拦截器(添加Token) ```javascript service.interceptors.request.use(config => { const accessToken = localStorage.getItem('access_token') if (accessToken) { config.headers.Authorization = `Bearer ${accessToken}` } return config }) ``` 3. 响应拦截器(处理Token过期) ```javascript let isRefreshing = false let requests = [] service.interceptors.response.use( response => response, async error => { const { config, response } = error // 检测401状态码 if (response.status === 401 && !config._retry) { if (!isRefreshing) { isRefreshing = true config._retry = true try { const { data } = await refreshToken() localStorage.setItem('access_token', data.access_token) // 重发队列中的请求 requests.forEach(cb => cb(data.access_token)) requests = [] return service(config) } catch (e) { logout() return Promise.reject(e) } finally { isRefreshing = false } } // 将未完成的请求加入队列 return new Promise(resolve => { requests.push(token => { config.headers.Authorization = `Bearer ${token}` resolve(service(config)) }) }) } return Promise.reject(error) } ) ``` 4. 刷新Token函数 ```javascript function refreshToken() { return axios.post('/auth/refresh', {}, { withCredentials: true // 自动携带Refresh Token Cookie }) } ``` 四、关键问题处理 1. 并发请求控制: - 使用`isRefreshing`标志位防止重复刷新 - 使用请求队列`requests`存储等待中的请求 2. Token过期检测策略: - 方案一:前端预判(需解析JWT的exp字段) ```javascript function isTokenExpired(token) { const payload = JSON.parse(atob(token.split('.')[1])) return payload.exp * 1000 < Date.now() } ``` - 方案二:通过401状态码触发(更可靠) 五、安全增强措施 1. Refresh Token应设置为: ```http Set-Cookie: refresh_token=xxx; HttpOnly; Secure; SameSite=Strict; Path=/auth/refresh ``` 2. Token存储规范: - Access Token:内存或localStorage - Refresh Token:仅通过HttpOnly Cookie传输 六、注意事项 1. 服务端需要实现: - /auth/refresh 刷新接口 - 完整的JWT签发机制 - Refresh Token的轮换机制(可选) 2. 错误处理边界: - Refresh Token过期时强制退出登录 - 网络异常时的降级处理 七、优势总结 1. 用户体验:避免频繁登录 2. 安全性:缩短Access Token有效期,降低泄露风险 3. 兼容性:符合OAuth 2.0规范 实际部署时,建议配合以下措施: 1. 添加请求频率限制 2. 实施IP白名单检测 3. 定期进行安全审计
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值