Vue.js Token失效处理与响应拦截器实现

本文档详细介绍了在Vue.js应用中处理Token失效的情况，主要涉及前端和后端的交互逻辑以及具体的代码实现。 在现代Web应用中，Token通常用于验证用户身份并授权其访问特定资源。JWT（JSON Web Tokens）是一种常见的Token形式，它包含用户信息并带有签名，以确保数据的安全性。然而，Token并非永久有效，通常有固定的有效期。当Token过期时，应用需要能够正确处理这种情况，避免用户无感知地失去权限或遭受安全风险。 目标： 处理Token失效的场景主要是为了确保用户在登录状态下的操作安全和用户体验。当后端检测到Token失效时，会向前端返回特定的状态码，以便前端可以做出相应的处理，如重新登录或者提示用户操作。 思路分析： 1. 后端处理：在接收到任何需要验证Token的接口请求时，后端服务器会检查Token的有效性。如果Token已经过期，后端会返回一个预定义的状态码，如10002，告知前端Token失效。 2. 前端处理：前端通过设置HTTP响应拦截器来捕获这个特殊状态码。当检测到状态码为10002时，前端需要执行Token失效的操作，这通常包括清除本地存储的Token、注销用户并引导用户重新登录。 代码落地： 在Vue.js应用中，响应拦截器通常是设置在axios或其他HTTP库的配置中，用来处理所有API请求的响应。以下是在`src/utils/request.js`中的示例代码： ```javascript // 引入路由 import router from '@/router' // 响应拦截器中 // 1. 根据后端返回数据判断本次操作是否成功，不成功主动报错 // 2. 如果成功，只返回有效数据 service.interceptors.response.use( response => { // 后端和前端的约定：success=true表示请求成功 if (response.data.success) { return response.data } else { // 如果success为false业务出错,直接触发reject // 被catch分支捕获 return Promise.reject(new Error(response.data.message)) } }, async error => { console.log('请求出错啦', error) if (error.response.data.code === 10002) { console.log('token失效') // 使用 vuex 的 dispatch 方法调用 logout action await store.dispatch('user/logout') // 获取当前路由信息，用于登录后重定向回原页面 const returnUrl = encodeURIComponent(router.currentRoute.fullPath) // 将用户重定向到登录页 router.push(`/login?return_url=${returnUrl}`) } console.dir(error) return Promise.reject(error) } ) ``` 总结： Vue.js应用中的Token失效处理是一个关键的安全环节，通过前后端的协同工作，确保了用户在Token过期后能够得到及时的通知并采取必要的行动。前端的响应拦截器是这一过程的核心，它监听并处理所有API请求的响应，确保在Token失效时能够正确地清理状态并引导用户重新登录，从而维持应用的安全性和用户体验。