Vue3 axios配置以及cookie的使用方法实例演示

时间:2023-03-20 Nanchen_42 人气:0

调用验证码方法

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

加载全部内容