axios相应拦截router前置路由守卫
概要
提示：在项目中,每个用户登录之后都会有一个token,一般token都会设置过期时间,如果在规定的时间内用户没有任何操作请求后端接口,就会导致用户的token过期,在过期后再次请求后端数据的话,一般接口就会返回状态码:401 标识没有权限.
axios相应拦截器
axios相应拦截,接收后端接口返回的信息,接口状态.
正常情况下接口请求后端数据,请求头携带用户token,接口返回状态: 200 表示请求成功,但是如果用户的token过期,用户就没有权限在去访问后端的数据,此时后端就会在接口的状态中返回:401
那么在这种情况下,用户状态过期,就需要咱们用户重新登录,拿到最新的token.
可以看到这个请求返回的状态就是401 没有权限
然后在axios相应拦截中判断接口状态是否是401 ,如果是就弹出弹窗, 这是提示框,点击确认就会跳转到login登录页面,但是用户偏偏不乖乖点击确认,他刷新页面,导致弹窗消失,用户还是在原来页面中
这是 axios中的请求拦截,拦截住状态为401接口.做出相对的处理
//3.响应拦截
instance.interceptors.response.use( res=>{
let status = res.response.status
if(status === 200){
...........
}
return res //return后的值被组件中的请求的then方法的res接收
},err =>{
if(err.response.status){
const status = err.response.status
if (status == 401) {
//判断是否存在登出标记 因为可能在一个页面中 会在短时间内请求多个接口,如果没有一个标识来判断的话,每次接口错误都会走这个代码块,导致触发多个弹窗.
if(!localStorage.getItem('isLoginOut'))//登出标记
{
//存入标识已经触发过 权限弹窗了 后面就不会触发 所以后面代码不能删除 名为isLoginOut
localStorage.setItem('isLoginOut', true);//登出标记
//请求登出接口
MessageBox.confirm('登录已过期，请重新登录！', '提示', {
confirmButtonText: '确定',
showClose: false,
showCancelButton: false,
closeOnClickModal: false,
type: 'warning'
}).then(() => {
//点击弹窗确认
$router.push({path: '/login'});//返回登录页
axios.post('/api/logout').then(res=>{
if(res.status_code === 200){
MessageBox.success('退出登录!')
}
})
})
}
}
// 清空缓存
localStorage.removeItem('token')
localStorage.removeItem('username')
localStorage.removeItem('user_id')
sessionStorage.clear()
}
return Promise.reject(err)
})
然后配合router.js中的 路由前置守卫
router.beforeEach((to, from, next) => {
console.log('去哪个页面', to);
console.log('在哪个页面进去', from);
//咱们在接口401的时候,弹出弹窗的同事清除了用户的token,所以这里每次路由发生变化的时候都会去判断是否存在token,如果不存在token就会跳转到登录页面 避免了用户F5刷新页面的问题
if (localStorage.getItem('token')) {
} else {
//在没有token的情况下,如果用户不是在 h5 或者 login 页面 那就直接清除缓存 并跳转login登录页面 这个可以配合axios中的401 结果结合
localStorage.clear()
sessionStorage.clear()
next('/login')
}
精彩文章
发表评论