先上代码

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.interceptors.request.use(config => {
  // console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

项目环境有开发环境、测试环境和生产环境。通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址。

if (process.env.NODE_ENV == 'development') {
    axios.defaults.baseURL = '开发url';}
else if (process.env.NODE_ENV == 'debug') {
    axios.defaults.baseURL = '测试url';
}
else if (process.env.NODE_ENV == 'production') {
    axios.defaults.baseURL = '生产url';
}

post请求头的设置

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

请求拦截

axios.interceptors.request.use(config => {
  // console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过.

axios的封装

//login.js  
import request from '@/utils/axios'

// 登录方法
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  }
  return request({
    url: '/login',
    method: 'post',
    data: data
  })
}

// 获取用户详细信息
export function getInfo() {
  return request({
    url: '/getInfo',
    method: 'get'
  })
}

// 退出方法
export function logout() {
  return request({
    url: '/logout',
    method: 'post'
  })
}

// 获取验证码
export function getCodeImg() {
  return request({
    url: '/captchaImage',
    method: 'get'
  })
}

然后在logon.vue组件引用logon.js 直接用调用它的函数方方法

<template>
    <div></div>
</template>
<script>
import { get } from "@/api/login";
export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        rememberMe: false,
        code: "",
        uuid: ""
      },
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    getCode() {
      get().then(res => {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.loginForm.uuid = res.uuid;
      });
    },
  }
};
</script>