Axios 封装 + 模拟登录 API

Axios 封装 + 模拟登录 API

步骤 1：安装 Axios 和 json-server

cd ./工程目录(pinia)

npm install axios

以管理员身份运行powershell

安装json-server, 输入：

npm install -g json-server

查看json-server版本

json-server --version

报错：

json-server : 无法将“json-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径
，请确保路径正确，然后再试一次。
所在位置 行:1 字符: 1

 json-server --watch db.json --port 3000

CategoryInfo          : ObjectNotFound: (json-server:String) [], CommandNotFoundException
    FullyQualifiedErrorId : CommandNotFoundException

运行：npm config get prefix 查看json-server安装位置

步骤 2：在项目根目录(工程)创建 db.json

{
  "users": [
    { "id": 1, "username": "张三", "password": "123" }
  ]
}

步骤3：启动json-server

npx json-server --watch db.json --port 3000

步骤 4：创建 src/utils/request.js

import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000
})

// 请求拦截器：自动添加 token
request.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器：统一处理错误
request.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token')
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

export default request

步骤 5：创建 src/api/user.js

import request from '../utils/request'

export const login = (data) => {
  // json-server 不支持直接密码校验，需要前端模拟：先查询用户，再对比密码
  return request.get('/users', { params: { username: data.username } })
}

步骤 6：修改 Login.vue 调用真实 API

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { login } from '../api/user'

const username = ref('')
const password = ref('')
const router = useRouter()
const userStore = useUserStore()

const handleLogin = async () => {
  try {
    const res = await login({ username: username.value, password: password.value })
    if (res.length > 0 && res[0].password === password.value) {
      userStore.setUser(username.value, 'fake-token')
      router.push('/home')
    } else {
      alert('用户名或密码错误')
    }
  } catch (error) {
    alert('登录请求失败')
  }
}
</script>

步骤 7：新建端口

npm run dev