vue+vite后台管理系统--登录（2）

前后端的数据交互

1. 项目API接口文档—–管理员登录接口
http://dishaxy.dishait.cn/shopadminapi

（1）接口说明

管理员登录

（2）基本信息

接口状态： 已完成
接口URL： http://ceshi13.dishait.cn/admin/login
请求方式： POST
Content-Type： application/x-www-form-urlencoded

（3）请求参数

 （4）响应示例

成功响应示例

{
"msg": "ok",
"data": {
"token": "e2d38e009179e5bcd9e9ced56dc9d1ade22838dd"
}
}

失败响应示例
 

{
"msg": "密码错误",
"errorCode": 20000
}

2.axios 数据请求配置

http://www.axios-js.com/zh-cn/
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

(1) axios安装

npm install axios

(2)配置axios.js

// 1.导入axios依赖包
import axios from "axios";
// 2.创建axios实例对象
const instance = axios.create({
baseURL: 'http://ceshi13.dishait.cn',
timeout: 1000,
});
// 暴露对象
export default instance

(3) 创建接口 api/manage.js文件，添加登录接口方法
promise对象——https://blog.csdn.net/qq_45890970/article/details/124100412
 

// 1.引入axios配置文件
import axios from "~/axios";
// 2.登录接口
export function login(username, password) {
//返回的是promise对象
return axios.post("/admin/login", {
username,
password
})
}

(4)在Login.vue组件调用login（）登录方法

// 获取form元素节点对象
const formRef = ref(null);
const onSubmit = () => {
formRef.value.validate((valid) => {
if (!valid) {
// console.log(valid);
return false;
}
// console.log("验证通过");
// 调用登录接口
login(form.username, form.password)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
});
};

（4）跨域异常处理
跨域—- https://blog.csdn.net/weixin_66375317/article/details/124545878

解决方案—–proxy代理方式
vite.config.js 文件修改

export default defineConfig({
server:{
proxy:{
// 选项写法
'/api': {
target: 'http://ceshi13.dishait.cn',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
})

axios.js 文件修改

const instance = axios.create({
baseURL: '/api', //使用代理别名'/api'
timeout: 1000,
});

（5）优化Login.vue组件调用login（）登录方法

// 导入弹窗对象函数
import { ElNotification } from "element-plus";
import { reactive, ref } from "vue";
import { login } from "../api/manage";
// 导入useRouter方法
import { useRouter } from "vue-router";
const router = useRouter();
const form = reactive({
username: "",
password: "",
});
// 验证规则
const rules = {
username: [
{
required: true,
message: "用户名不能为空",
trigger: "blur",
},
],
password: [
{
required: true,
message: "密码不能为空",
trigger: "blur",
},
],
};
// 获取form元素节点对象
const formRef = ref(null);
const onSubmit = () => {
formRef.value.validate((valid) => {
if (!valid) {
// console.log(valid);
return false;
}
// console.log("验证通过");
// 调用登录接口
login(form.username, form.password)
.then((res) => {
// console.log(res.data.data);//token值
// 1.成功是弹窗提示
ElNotification({
title: "请求成功",
message: "登录成功，将自动跳转转到后台首页",
type: "success",
duration: 2000, //弹出持续显示时间
});
// 2.存储token值
// 3.跳转到后台首页
router.push("/");
})
.catch((err) => {
// console.log(err.response.data.msg);
// element plus弹窗设置
ElNotification({
title: "请求失败",
message: err.response.data.msg || "用户登录失败",
type: "error",
duration: 2000, //弹出持续显示时间
});
});
});
};

引入cookie存储用户token

1 vueUse库

VueUse不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API的常用
工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支
持响应式的JS API变得支持响应式，省去程序员自己写相关代码。
官网：https://vueuse.org/

2.安装

https://blog.csdn.net/qq_40021015/article/details/123658243

(1) 先安装 vueuse/integrations 库

npm i @vueuse/integrations

(2) 再安装universal-cookie库

npm i universal-cookie

3 使用cookie 存储登录的token值

//在当前组件js顶层引入cookie工具库
import { useCookies } from "@vueuse/integrations/useCookies";
//登录操作
// 获取form元素节点对象
const formRef = ref(null);
const onSubmit = () => {
formRef.value.validate((valid) => {
if (!valid) {
// console.log(valid);
return false;
}
// console.log("验证通过");
// 调用登录接口
login(form.username, form.password).then((res) => {
// console.log(res.data.data);//token值
// 1.成功是弹窗提示
ElNotification({
title: "请求成功",
message: "登录成功，将自动跳转转到后台首页",
type: "success",
duration: 2000, //弹出持续显示时间
});
// 2.存储token值
const cookies = useCookies();
cookies.set("admin-token", res.data.data.token);
// 3.跳转到后台首页
router.push("/");
})
.catch((err) => {
// console.log(err.response.data.msg);
// element plus弹窗设置
ElNotification({
title: "请求失败",
message: err.response.data.msg || "用户登录失败",
type: "error",
duration: 2000, //弹出持续显示时间
});
});
});
};