The project was tested these days, and the test mentioned a bug to me. It said that the token had expired, and the route should automatically jump to the login page to let the user log in again. The token validity of our company is set to one hour in the production environment. When the token expires, all interfaces will directly return 2: Each route jump evaluates the token and sets up a global beforeEach hook function. If the token exists, it jumps to the page you need, otherwise it goes directly to the login page for the user to log in and access the token again

The interface returns a message {code:10009,
	msg:'token expired',
	data:null} Router.beforeeach (async(to, from, next) => {/ / access token
  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
  // If the token exists, the current route is the login interface
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
    // In this case, pull the user permission to determine whether the user has permission to access the route
    } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error') next(`/login? redirect=${to.path}`) NProgress.done() } }else {
    / / token does not exist
    if(whiteList.indexOf(to.path) ! = = -1) {
    // If the route to be skipped is in the whitelist, the route is skipped
      next()
    } else {
    // Otherwise go to the login pagenext(`/login? redirect=${to.path}`) NProgress.done() } } })Copy the code

Therefore, I directly intercept all the requests. When the code returned by the response data is 10009, I will directly empty the user information and reload the page. I have simplified the code, because the user will store the token, name and permission information in the store/user.js file when logging in, so as long as the token expires, the user file information will be emptied. In this way, when the token expires, the global beforeEach judgment is invoked when refreshing the page or jumping components. When the token information does not exist, the login page is directly skipped

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, 
  timeout: 5000 
})
// Carry the token when sending the request
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['sg-token'] = getToken()
    }
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    console.log(response.data)
    const res = response.data

    // Return to the login page after the token expires
    if (res.code === 10009) {
      store.dispatch('user/logout').then(() => {
        location.reload(true)})}return res
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.msg,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

Copy the code

Ok, so much for the token sharing, the above code is changed into your data according to the situation of your project, welcome to point out any errors!