Vue3 axios配置以及cookie的使用方法实例演示
作者：Nanchen_42
这篇文章主要介绍了Vue3 axios配置以及cookie的使用方法,需要的朋友可以参考下
调用验证码方法
在Request.js也就是axios中添加切换验证码方法
// 请求后拦截
instants.interceptors.response.use(
(response) => {
if (showLoading && loading) {
loading.close();
}
const responseData = response.data;
if (responseData.status == "error") {
// 如果触发了errorCallback函数，那么就让他切换验证码
if (config.errorCallback) {
config.errorCallback()
}
// 结尾
return Promise.reject(responseData.info);
} else {
return responseData;
}
},
(error) => {
if (showLoading && loading) {
loading.close();
}
return Promise.reject("网络异常");
}
);
在Login.vue的请求接口中使用errorCallback方法
封装的验证码地址写法如下
const api={
checkCode:'api/checkCode',
login:"login"
}
const formDataRef = ref()
const fromData = reactive({});
// 切换验证码
const checkCodeUrl = ref(api.checkCode);
const changeCheckCode = ()=>{
checkCodeUrl.value = api.checkCode + "?" +new Date().getTime();
}
const login = ()=>{
// validate
formDataRef.value.validate(async(valid)=>{
if (!valid) {
return;
}
let result = await proxy.Request({
url:api.login,
params:{
account:fromData.account,
// 这里需要通过md5进行加密
password:md5(fromData.password),
checkCode:fromData.checkCode
// 触发验证码错误时切换验证码
},errorCallback:()=>{
changeCheckCode()
}
})
if (result) {
return;
}
})
}
登录有两种验证方案，可以使用token验证或者用cookie验证，这里说一下Cookie验证
Cookie使用方法
安装cookie
npm i vue-cookies --save
登录时可以不需要使用token去验证，cookie里已存在，这个还是根据后端用token还是cookie验证，自己写的话可以设置cookie模式
引入cookie
import VueCookies from 'vue-cookies';
存贮cookie
const loginInfo = {
account :params.account,
password:params.password,
}
console.log(loginInfo);
// 永不过期
/* 如果得点击记住密码之后那么就让他的状态，也就是cookie值永不过期，直到他自己过期 */
VueCookies.set("userInfo",result.data,0);
/* 如果他点击了记住我那么就让他记录七天 */
if(fromData.rememberMe){
VueCookies.set("loginInfo",loginInfo,'7d')
}
最后得到cookie在页面加载时显示得到的账号以及密码
const init=()=>{
const loginInfo= VueCookies.get('loginInfo');
if (!loginInfo) {
return
}
/* 转成对象 */
Object.assign(fromData,loginInfo)
}
init();
点击登录执行的完整方法：
const login = () => {
// 加载状态
loading.value = true;
// elm自带方法
formDataRef.value.validate(async (valid) => {
if (!valid) {
loading.value = false;
return;
}
// 得到账号，密码以及记住密码
let cookieLoginInfo = VueCookies.get("loginInfo");
// cookie密码为空的情况
let cooliePassword =
cookieLoginInfo == null ? null : cookieLoginInfo.password;
// 如果输入的密码与cookie中存的密码一致，那么就进行加密
if (formData.password !== cooliePassword) {
formData.password = md5(formData.password);
}
// 封装一个对象用来包含输入的状态，也就是账号、密码以及复选框
let params = {
account: formData.account,
password: formData.password,
checkCode: formData.checkCode,
};
// console.log(params);
// result
let result = await proxy.Request({
url: api.login,
params: params,
errorCallback: () => {
changeCheckCode();
},
});
if (!result) {
loading.value = false;
formData.password = "";
return;
}
// 成功后自动跳转页面
setTimeout(() => {
router.push("/");
loading.value = false;
}, 1500);
const loginInfo = {
account: params.account,
password: params.password,
rememberMe: formData.rememberMe,
};
console.log(loginInfo);
// 永不过期
VueCookies.set("userInfo", result.data, 0);
console.log(formData.rememberMe);
if (formData.rememberMe == 1) {
VueCookies.set("loginInfo", loginInfo, "7d");
}
});
};
以上就是Vue3 axios配置以及cookie的使用方法的详细内容，更多关于Vue3 axios配置以及cookie的使用方法的资料请关注脚本之家其它相关文章！