Vue:请求401 没有权限 退出登录

• • 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')

   }