Detailed explanation of VUE Token's invalidation process

Target

Handling token expiration scenarios

Token, as the key token information of the user, is not valid for a long time. Generally, there will be an expiration time (determined by the backend after what time it will expire). If the expiration time is exceeded, the current token can no longer be used as a user identification to request data. At this time, we need to do some additional expiration processing

Thought Analysis

Backend : When receiving a request from a user to access a certain interface, check whether the current token is invalid. If the token is invalid, return an agreed status code 10002 to the frontend.

Front-end : In the response interceptor, analyze the return value of the interface. If the status code is 10002, perform token invalidation operation.

Code landing

In **src/utils/request.js** , add custom logic when handling the error of the response interceptor

Since page jumps require routing, we first introduce

// Import routing import router from '@/router'

Code

// In the response interceptor // 1. Determine whether the operation is successful based on the data returned by the backend, and report an error if it is unsuccessful // 2. If successful, only return valid data service.interceptors.response.use(
  response => {
    // Agreement between backend and frontend: success=true indicates successful request if (response.data.success) {
      return response.data
    } else {
      // If success is false, the business is wrong, and reject is triggered directly
      // Captured by catch branch return Promise.reject(new Error(response.data.message))
    }
  },
  async error => {
    console.log('Request error', error)
    if (error.response.data.code === 10002) {
      console.log('token expired')
      await store.dispatch('user/logout')
      // .vue -- this.$route.fullPath
      // .js -- router.currentRoute.fullPath

      router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
    }
    console.dir(error)
    return Promise.reject(error)
  }
)

The above solution is the backend-led solution. The frontend only needs to get the error code to do business processing. This solution is also the most commonly used and safest solution.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!