Vue 3 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"); } }); };
