文章摘要
这篇文章介绍了如何在Node.js项目中使用VUex和响应拦截器来管理用户权限和登录状态。文章首先引入了VUex的Store实例和路由对象，然后定义了一个响应拦截器来处理返回的业务数据。在处理401错误时，文章展示了如何跳转到登录页面，并通过更新或清除用户数据来管理登录状态。具体来说，当401错误发生时，会检查用户是否有有效的refresh_token，如果没有则直接跳转到登录页面；如果有，则尝试通过API刷新token并更新VUex状态，如果刷新失败则清除用户数据并重新跳转到登录页面。文章的重点在于展示了如何结合VUex和响应拦截器实现用户的登录与权限管理功能。
import store from ‘@/store’ // 引入vuex中的store实例
import router from ‘@/router’ // 引入路由对象实例
……
// 响应拦截器
instance.interceptors.response.use(
function (response) {
try {
// 返回具体有价值的业务数据
return response.data.data
} catch (error) {
return response.data
}
},
async function (error) {
// 响应有错误，有可能错误状态码为401
if (error.response && error.response.status===401) {
// 定义登录路由对象
let toPath={
name: ‘login’,
query: { redirectUrl: router.currentRoute.path }
} // 跳转对象
// 如果refresh_token不存在
if (!store.state.user.refresh_token) {
router.push(toPath)
return Promise.reject(error)
}
try {
// 刷新用户token
// 应该发送一个请求 换取新的token
// 这里不应该再用instance 因为 instance会再次进入拦截器 用默认的axios
let result=await axios({
method: ‘put’,
url: ‘http://ttapi.research.itcast.cn/app/v1_0/authorizations’,
headers: {
Authorization: `Bearer ${store.state.user.refresh_token}`
}
})
// 获取到新token后，就对vuex和localStorage进行更新
store.commit(‘updateUser’, {
token: result.data.data.token, // 拿到新的token之后
refresh_token: store.state.user.refresh_token // 将之前 refresh_token 14天有效期
})
return instance(error.config) // 把刚才错误的请求再次发送出去 然后将promise返回
} catch (err) {
// 如果错误 表示补救措施也没用了(有可能refresh_token也失效了)
// 应该跳转到登录页 并且 把废掉的用户信息全都干掉
store.commit(‘clearUser’) // 所有的用户信息清空
router.push(toPath) // 跳转到回登录页
return Promise.reject(err)
}
}
return Promise.reject(error)
}
)
‘) // 所有的用户信息清空
router.push(toPath) // 跳转到回登录页
return Promise.reject(err)
}
}
return Promise.reject(error)
}
)