脚本宝典收集整理的这篇文章主要介绍了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
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的使用方法的资料请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的Vue3 axios配置以及cookie的使用方法实例演示全部内容,希望文章能够帮你解决Vue3 axios配置以及cookie的使用方法实例演示所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。