目录：

依赖：

npm install --save axios qs js-cookie

auth.js

const TokenKey = 'token'
const TokenStorageMode = 'localStorage'  
const TokenExpireTime = 1800000
const TokenExpireKey = 'TokenExpireKey'
// import Cookies from 'js-cookie'  // TokenStorageMode为'cookie'时用

export function getToken() {
  // 'cookie'
  if (TokenStorageMode === 'cookie') {
    return Cookies.get(TokenKey)
  }
  // 'localStorage'
  const expireTime = localStorage.getItem(TokenExpireKey)
  let token = localStorage.getItem(TokenKey)
  if (TokenExpireTime > 0 && expireTime && Date.now() > parseInt(expireTime)) {
    // token过期了...
    token = null
    removeToken()
  }
  return token
}

export function setToken(token) {
  if (TokenStorageMode === 'cookie') {
    // Cookies.set(TokenKey, token)
    return
  }
  localStorage.setItem(TokenKey, token)
  localStorage.setItem(TokenExpireKey, Date.now() + TokenExpireTime)
}

export function removeToken() {
  if (TokenStorageMode === 'cookie') {
    // Cookies.remove(TokenKey)
    return
  }
  localStorage.removeItem(TokenKey)
  localStorage.removeItem(TokenExpireKey)
}

 request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router from '../router/index'
const TokenStorageMode = 'localStorage'
let unLoginDialogOpen = false;

// create an axios instance
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 10000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    const token = getToken()
    if (token) {
      if (TokenStorageMode === 'localStorage') {
        // 如果由本地管理，则需要在头文件增加token
        config.headers['token'] = getToken()
      }
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data
    if (process.env.VUE_APP_TOKEN_MODE === 'jwt') {
      const action = response.headers['action']
      if (action === 'create') {
        // console.log('token创建，保存token...')
        setToken(response.headers['token'])
      }
      if (action === 'update') {
        // console.log('刷新token...')
        setToken(response.headers['token'])
      }
      if (action === 'delete') {
        // console.log('删除token...')
        removeToken()
      }
    }
    // if the custom code is not 000000, it is judged as an error.
    if (res.code !== '000000') {
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === '100001' || res.code === '100005' || res.code === '100007' || res.code === '100011') {
        // to re-login
        if(!unLoginDialogOpen){
          unLoginDialogOpen = true
          MessageBox.confirm(res.msg, '提示', {
            confirmButtonText: '确定',
            showClose: false,
            showCancelButton: false,
            closeOnClickModal: false,
            closeOnPressEscape: false,
            type: 'warning',
            beforeClose:function(action, instance, done){
              unLoginDialogOpen = false
              done()
            }
          }).then(() => {
            router.push('/login')
          })
        }
      } else {
        Message({
          message: res.msg || '自定义内容',
          type: 'error',
          duration: 5 * 1000
        })
      }
      return Promise.reject(new Error(res.msg || 'Error'))
    } else {
      return res
    }
  },
  error => {
    Message({
      message: '网络连接错误，请重试!',
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

import axios from 'axios'
// import { MessageBox, Message } from 'element-ui'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router from '../router/index'
const TokenStorageMode = 'localStorage'
let unLoginDialogOpen = false;

// create an axios instance
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: false, // send cookies when cross-domain requests
  timeout: 10000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    const token = getToken()
    if (token) {
      if (TokenStorageMode === 'localStorage') {
        // 如果由本地管理，则需要在头文件增加token
        config.headers['token'] = getToken()
      }
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    const action = response.headers['action']
    if (action === 'create') {
      // console.log('token创建，保存token...')
      setToken(response.headers['token'])
    }
    if (action === 'update') {
      // console.log('刷新token...')
      setToken(response.headers['token'])
    }
    if (action === 'delete') {
      // console.log('删除token...')
      removeToken()
    }
    if (response.data.code == '200' ) {
      return response.data.data
    }
  },
  error => {
    return Promise.reject(error)
  }
)
export default service

 

api-api.js

import request from '@/utils/request'
import qs from 'qs'
export const BASIC_URL = 'http://localhost:8080' 

// 登录
export function reqLogin(data) {
    return request({
        url: BASIC_URL + '/login',
        method: 'post',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: qs.stringify(data)
    })
}

index.vue

import { reqLogin } from '@/api/api'

reqLogin({ userName: username.trim(), password: password })
    .then( res => {
        if (that.form.isRecord){
            Cookies.set('loginInfo', that.form, { expires: 7 })
        } else {
            Cookies.set('loginInfo', "{}", { expires: 7 })
        }
        this.$router.replace('/msite')
     }).catch(()=>{
     })

---

关于qs：

https://www.npmjs.com/package/qs

关于登录页记住密码：

https://blog.csdn.net/weixin_59128282/article/details/118438918?spm=1001.2014.3001.5501