axios 拦截器 -- Token验证 -- 模块化引用

npm i axios

//@/utils/request.js

import axios from 'axios'

axios.defaults.baseURL = 'http://10.7.173.80:3000'
const axiosServer = axios.create({
	baseURL: 'http://10.7.173.80:3000',
	timeout: 2000,
})

// 请求拦截器
axiosServer.interceptors.request.use(
	function (config) {
		console.log('发送请求之前，执行这里的代码');
		// 发送请求之前，执行这里的代码
		// 在请求拦截器
		// 将登录成功保存的token设置到authorization请求头，发送给后端
		// 1. 获取登录成功保存的token
		let token = localStorage.getItem('Token')
		token = JSON.parse(token)
		if (token) {
			// 2. 设置到authorization请求头
			config.headers.common['authorization'] = token
		}

		return config
	},
	function (err) {
		//处理请求错误
		return Promise.reject(err)
	}
)

export default axiosServer

//@/api/product.js

import axiosServer from "@/utils/request.js";

export const requestProductList = ()=>{
    return axiosServer({
        method:'get',
        url:'/product/list'
    })
}

//@/api/user.js
	
import axios from "axios";
import axiosServer from "@/utils/request.js";

/**
 * 用户登录
 */
export const requestUserLogin = (username,password)=>{
    return axios({
        method: "post",
        url: "/user/login",
        data: {
          username,
          password,
        },
    })
}

//@/views/Product/index.vue

import { requestProductList } from "@/api/product.js"

...
async created() {
    let res = await requestProductList()
    let data = res.data;
    let { resultCode, resultInfo } = data;
    if (resultCode == 1) {
      this.list = resultInfo.list;
    }
  },
...

//@/views/login.vue

import { requestUserLogin } from "@/api/user.js"

...
methods: {
    async onLogin() {
      // 表单验证
      // 调用接口
      let res = await requestUserLogin(this.user.name,this.user.password)
      let data = res.data;
      let { resultCode, resultInfo } = data;
      if (resultCode == 1) {
        // 保存用户信息和token到loalStorage
        let user = { nick: resultInfo.nick, headerimg: resultInfo.headerimg };
        localStorage.setItem("USER", JSON.stringify(user));
        localStorage.setItem("Token", JSON.stringify(resultInfo.token));
        // 跳转到主界面
        this.$router.push({ path: "/main" });
      }else{
        alert('用户名或密码出错!')
      }
    },
  },
...