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

请求拦截器和响应拦截器

1.响应拦截器

axios.js响应拦截器设置

地址：拦截器 | Axios 中文文档 | Axios 中文网

//在axios文件内
import { ElNotification } from "element-plus";
// 1.导入axios依赖包
import axios from "axios";
// 2.创建axios实例对象
const instance = axios.create({
baseURL: '/api',
timeout: 1000,
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
//请求响应成功之前拦截----以后所有的token值都可以在拦截器中完成
return response.data.data; //返回token值
}, function (error) {
//请求响应失败之前拦截---以后所有的错误提示都可以在拦截器中完成
// 弹窗设置element plus
ElNotification({
title: "请求失败",
message: error.response.data.msg || "用户登录失败",
type: "error",
duration: 2000, //弹出持续显示时间
});
return Promise.reject(error);
});
// 暴露对象
export default instance

2.请求拦截器

axios.js请求拦截器设置

// 1.导入axios依赖包
import axios from "axios";
// 2.创建axios实例对象
const instance = axios.create({
baseURL: '/api',
timeout: 1000,
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么---header请求头报文中添加token值
const cookie = useCookies();
const token = cookie.get("admin-token");
// 如果本地存储有tooken值，则将token值添加到请求头报文中
if (token) {
config.headers["token"] = token;
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 暴露对象
export default instance

3.获取用户信息

（1）manage.js添加getUserInfo接口

// 3.获取用户信息接口
export function getUserInfo() {
return axios.post("/admin/getinfo")
}

(2)login.vue登录成功后获取当前用户信息

const onSubmit = () => {
formRef.value.validate((valid) => {
// 调用登录接口
login(form.username, form.password).then((res) => {
// 登录成功后获取用户信息
getUserInfo().then((res2) => {
console.log(res2);
});
});
});

4.防止用户重复点击登录按钮问题并添加loading动画

（1）Login.vue 登录按钮中绑定属性 :loading="loading"
（2）在登录按钮验证成功后，loading.value = true;
（3）请求结束后，loading.value = false;

如果loading为true，则开始加载动画并不可点击，
如果loading为false，则停止加载动画并可再次点击

常用工具库封装

1.封装token的工具库

创建tools/tokenTool.js文件并写以下代码

import { useCookies } from "@vueuse/integrations/useCookies";
const tokenKey = "admin-token";
const cookie = useCookies();
// 1.获取token方法
export function getToken() {
return cookie.get(tokenKey)
}
// 2.设置token方法
export function setToken(token) {
return cookie.set(tokenKey, token)
}
// 3.移除token方法
export function romoveToken() {
return cookie.remove(tokenKey)
}

注意：项目中使用时，只需引入tools/tokenTools.js 文件的相对应方法即可

2.封装信息弹窗的工具库

创建tools/noticeTools.js文件并写以下代码

// 弹窗信息工具库
// 导入弹窗对象函数
import { ElNotification } from "element-plus";
// 弹窗信息
export function notice(title, message, type, dangerouslyUseHTMLString =
false) {
ElNotification({
title, //标题
message, //信息文本
type, //类型
dangerouslyUseHTMLString, //是否将 message 属性作为 HTML 片
段处理
duration: 2000, //弹出持续显示时间
});
}

注意：项目中使用时，只需引入tools/noticeTools.js 文件的相对应方法即可