vue项目token处理登录,vue自动刷新token
主要介绍vue实现token过期自动跳转到登录页面。通过示例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
这几天项目测试测试给我出了个bug，说令牌过期了，路由要自动跳转到登陆页面，让用户重新登录。先说一些前提条件，
1:我们公司的令牌时间限制在生产环境中设置为一小时。当令牌过期时，将直接返回所有接口。
2.每次路由跳转都会判断令牌，并设置一个全局beforeEach钩子函数。如果令牌存在，跳转到您需要的页面，否则。
只需跳转到登录页面，让用户登录并再次访问令牌。
接口返回的信息
{
代码：10009，
消息：“令牌过期”，
数据：空
}
全局路由挂钩功能
router.beforeEach(async(to，from，next)={
//获取令牌
//确定用户是否已经登录
const hasToken=getToken()
如果(hasToken) {
//令牌存在，如果当前跳转的路由是登录接口
if (to.path===/login) {
//如果已登录，则重定向到主页
下一步({路径：/ })
NProgress.done()
}否则{
//这里去掉用户权限，确定用户是否有权限访问这条路由。
} catch(错误){
//删除令牌并转到登录页面重新登录
await store . dispatch( user/reset oken )
Message.error(error 有错误)
下一个(`/登录？redirect=${to.path} `)
NProgress.done()
}
}否则{
//令牌不存在
if (whiteList.indexOf(to.path)！==-1) {
//如果要跳转的路由在白名单中，就跳过它。
下一个()
}否则{
//否则跳转到登录页面
下一个(`/登录？redirect=${to.path} `)
NProgress.done()
}
}
})
所以我直接拦截所有请求。当数据在响应中返回的代码是10009时，我就直接清除用户信息，重新加载页面。我简化了代码，因为当用户登录时，令牌、名称和权限信息都会存储在store/user.js文件中，所以只要令牌过期，用户文件中的信息就会被清除。这样，令牌过期后，在刷新页面或跳转组件时，会调用全局beforeEach判断，当令牌信息不存在时，会直接跳转到登录页面。
从“axios”导入axios
从“元素-用户界面”导入{ MessageBox，Message }
从“@/store”导入商店
从“@/utils/auth”导入{ getToken }
const service=axios.create({
BASE URL:process . env . vue _ APP _ BASE _ API，
超时：5000
})
//发送请求时随身携带令牌。
service . interceptors . request . use(
配置={
if (store.getters.token) {
config . headers[ SG-token ]=getToken()
}
返回配置
},
错误={
console.log(错误)
退货承诺.拒绝(错误)
}
)
服务.拦截器.响应.使用(
响应={
console.log(response.data)
const res=response.data
//令牌过期。返回登录界面。
if (res.code===10009) {
store.dispatch(用户/注销)。然后(()={
location.reload(true)
})
}
返回资源
},
错误={
console.log(err error) //用于调试
消息({
消息：error.msg，
类型：“错误”，
时长：5 * 1000
})
退货承诺.拒绝(错误)
}
)
导出默认服务
好了，分享token到此为止。上面的代码会根据您的项目更改为您的数据。
关于vue实现令牌过期自动跳转登录页面的这篇文章到此为止。关于vue令牌过期自动跳转的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。