Vue 整合 Axios 实现登录功能（解决跨域问题）

Vue 是一种流行的前端框架，Axios 是一个用于发起 HTTP 请求的 JavaScript 库。本文将教你如何在 Vue 项目中整合 Axios，完成登录功能，并解决开发环境下的跨域问题。

安装 Axios

在项目根目录下打开控制台，运行以下命令安装 Axios：

npm install axios

创建 Axios 实例

通常需要在项目中创建一个 Axios 实例，以便为整个应用配置默认的请求参数和拦截器。

在 /src 目录下创建 axios.js 文件，内容如下：

import axios from "axios";

// 创建 Axios 实例
const instance = axios.create({
    baseURL: "http://localhost:8080", // 你的 API 基础 URL
    timeout: 7000, // 请求超时时间
})

// 暴露出去
export default instance;

封装请求 API

推荐在 /src 目录下创建一个 /api 文件夹，专门用于放置接口请求相关代码。

在 /admin 文件夹下创建 user.js，用于统一放置用户相关的接口，如登录接口等：

import axios from "@/axios";

// 登录接口
export function login(username, password) {
    return axios.post("/login", {username, password})
}

完善登录页面

回到登录页，修改内容如下：

<template>
    // 省略...
    <el-form class="w-5/6 md:w-2/5">
        <el-form-item>
            <!-- 输入框组件 -->
            <el-input size="large" v-model="form.username" placeholder="请输入用户名" :prefix-icon="User" clearable />
        </el-form-item>
        <el-form-item>
            <!-- 密码框组件 -->
            <el-input size="large" type="password" v-model="form.password" placeholder="请输入密码" :prefix-icon="Lock" clearable />
        </el-form-item>
        <el-form-item>
            <!-- 登录按钮，宽度设置为 100% -->
            <el-button class="w-full mt-2" size="large" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
    </el-form>
    // 省略...
</template>

<script setup>
// 省略...
import { login } from '@/api/admin/user'
import { reactive } from 'vue' 

// 定义响应式的表单对象
const form = reactive({
    username: '',
    password: ''
})

// 登录
const onSubmit = () => {
    console.log('登录')
    login(form.username, form.password).then((res) => {
        console.log(res)
    })
}

</script>

上述代码中，我们定义了一个响应式的表单对象 form，里面声明了用户名、密码字段，同时通过 v-model 将输入框与 form 绑定在了一起。然后为登录按钮添加了点击事件，对应的方法为 onSubmit()，方法中调用了刚刚声明的 login() 接口，入参为输入框中填写的用户名、密码。最终，打印了 res 对象，用于查看接口能够正常调通。

跨域问题

跨域原因

跨域是指在同一浏览器中运行的前端应用程序试图与不同域（协议、域名、端口号中有任何一个不同）的服务器进行通信。由于浏览器的同源策略，这种情况下会受到限制。

跨域解决方案

在开发环境中，你可以使用代理来绕过跨域问题。Vite 提供了一个配置项来设置代理。在项目根目录的 vite.config.js 文件中，添加以下内容：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  },
	// 省略...
})

然后就可以在代码中使用 /api 前缀来代替完整的请求地址，修改 axios.js 文件，将 baseURL 改成 /api 即可。

再次点击登录按钮，查看控制台日志，即可看到正常打印 res 对象信息啦。

后台首页

在 /pages/admin/ 目录下，新建 index.vue，表示登录后台的首页：

<template>
    <div>
        后台首页
    </div>
</template>

注册路由

编辑 /router/index.js 路由文件，添加后台首页路由：

import AdminIndex from '@/pages/admin/index.vue'

// 统一在这里声明所有路由
const routes = [
    // 省略...
    {
        path: "/admin/index", // 后台首页
        component: AdminIndex,
        meta: {
            title: 'Admin 后台首页'
        }
    }
]

跳转后台首页

当登录成功后，通过 router 跳转 index.vue 页：

<script setup>
// 省略...
import { useRouter } from 'vue-router';

const router = useRouter()

// 登录
const onSubmit = () => {
    login(form.username, form.password).then((res) => {
        console.log(res)
        // 判断是否成功
        if (res.data.success == true) {
            // 跳转到后台首页
            router.push('/admin/index')
        }
    })
}

</script>

本文由 Clarity 学习台 AI 助手生成