Solve the token timeout problem

1. The token timeout problem is mainly due to a token failure problem. If you check the error message and you will find that the status code 401
appears , then we will make a response choice in the response interceptor. The specific implementation steps are as follows

      // 401:什么意思？无权限
        1：删除token和用户信息
        2:提示错误信息跳转登陆页

1. Delete token and user information

Clear our state in mutations
The reason why we do this step is because our vuex is mainly used to store public data, and the state defines public data, we use mutations to modify it.
This picture is very clear

insert image description here

The specific code
path is: store/modules/user.js

    LOGOUT(state) {
    
    
      state.token = ''
      state.userInfo = ''
    }

2: Prompt error message to jump to the landing page

The key code
path is utils/request.js

    // 错误处理 --> 拦截失效码
    if (error.response && error.response.status === 401) {
    
    
      store.commit('user/LOGOUT')
      Message.error(error.response.data.message)
      router.push('/login')
    }

Why do we use 401 as the judgment standard

  (error) => {
    
    
    // 错误处理 --> 拦截失效码
    if (error.response && error.response.status === 401) {
    
    
      store.commit('user/LOGOUT')
      Message.error(error.response.data.message)
      router.push('/login')
    }

    // console.dir(error);
    return Promise.reject(error)
  })

Add a status code question here

  2开头：成功
  3开头：重定向
      301：永久重定向
      304：协商缓存
  资源过期了，进行http请求，但接口告诉客户端资源无修改，还可使用
  4:客户端错误
      401：无权限
      403：无资源权限
      404：找不到
      400:请求参数错误
  5：服务器

overall code

import router from '@/router'
import store from '@/store'
import axios from 'axios'
import {
    
     Message } from 'element-ui'

const axiosCreate = axios.create({
    
    
  // 本地接口基地址
  // baseURL: 'http://localhost:3000/api'
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 100000000,
  // 是否跨域？
  withCredentials: true
})

// 请求拦截
axiosCreate.interceptors.request.use(function (config) {
    
    
  if (!config.noToken) {
    
    
    config.headers.Authorization = `Bearer ${
      
      store.state.user.token}`
  }
  return config
}, function (error) {
    
    
  return Promise.reject(error)
})


// 响应拦截
axiosCreate.interceptors.response.use((res) => {
    
    
  // 状态码未2开头走res
  if (res.data.success) {
    
    
    return res.data
  } else {
    
    
    console.log('错误信息', res)
    Message.error(res.data.message)
    return Promise.reject(new Error(res.data.message))
  }
  // return res
},
  (error) => {
    
    
    // 错误处理 --> 拦截失效码
    if (error.response && error.response.status === 401) {
    
    
      store.commit('user/LOGOUT')
      Message.error(error.response.data.message)
      router.push('/login')
    }

    // console.dir(error);
    return Promise.reject(error)
  })

// 暴露出去
export default axiosCreate

This is successful, let's implement the following

When I enter the page, modify our token and see what happens

insert image description here
Automatic Popup

Summary

(err)=>{
    
    
   if(err.response && err.response.status===401){
    
    
      // 删除token
      // 删除用户信息
      // 提示
      // 跳转路由到登录页
   }
  return Promise.reject(err)
}