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的使用方法的资料请关注其它相关文章！

• Vue3全局配置axios的两种方式总结
• vue3项目中封装axios的示例代码
• vue3+vite+axios 配置连接后端调用接口的实现方法
• 前端vue3使用axios调用后端接口的实现方法
• vue3 axios 实现自动化api配置详解
• Vue3在Setup中使用axios请求获取的值方式
• 关于Vue3使用axios的配置教程详解
• Vue3.0 axios跨域请求代理服务器配置方式

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！