快捷導(dǎo)航

Vue3 axios配置以及cookie的使用方法實(shí)例演示

更新時(shí)間：2023年02月18日 13:26:54 作者：Nanchen_42

這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下

調(diào)用驗(yàn)證碼方法

在Request.js也就是axios中添加切換驗(yàn)證碼方法

  // 請(qǐng)求后攔截
  instants.interceptors.response.use(
    (response) => {
      if (showLoading && loading) {
        loading.close();
      }
      const responseData = response.data;
      if (responseData.status == "error") {
        // 如果觸發(fā)了errorCallback函數(shù)，那么就讓他切換驗(yàn)證碼
        if (config.errorCallback) {
          config.errorCallback()
        }
        // 結(jié)尾
        return Promise.reject(responseData.info);
      } else {
        return responseData;
      }
    },
    (error) => {
      if (showLoading && loading) {
        loading.close();
      }
      return Promise.reject("網(wǎng)絡(luò)異常");
    }
  );

在Login.vue的請(qǐng)求接口中使用errorCallback方法
封裝的驗(yàn)證碼地址寫法如下

const api={
  checkCode:'api/checkCode',
  login:"login"
}
const formDataRef = ref()
const fromData = reactive({});
// 切換驗(yàn)證碼
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進(jìn)行加密
        password:md5(fromData.password),
        checkCode:fromData.checkCode
        // 觸發(fā)驗(yàn)證碼錯(cuò)誤時(shí)切換驗(yàn)證碼
      },errorCallback:()=>{
        changeCheckCode()
      }
    })
    if (result) {
      return;
    }
  })
}

登錄有兩種驗(yàn)證方案，可以使用token驗(yàn)證或者用cookie驗(yàn)證，這里說一下Cookie驗(yàn)證

Cookie使用方法

安裝cookie

 npm i vue-cookies --save

登錄時(shí)可以不需要使用token去驗(yàn)證，cookie里已存在，這個(gè)還是根據(jù)后端用token還是cookie驗(yàn)證，自己寫的話可以設(shè)置cookie模式

引入cookie

import VueCookies from 'vue-cookies';

存貯cookie

    const loginInfo = {
      account :params.account,
      password:params.password,
    }
    console.log(loginInfo);
    // 永不過期
    /* 如果得點(diǎn)擊記住密碼之后那么就讓他的狀態(tài)，也就是cookie值永不過期，直到他自己過期 */
   VueCookies.set("userInfo",result.data,0);
   /* 如果他點(diǎn)擊了記住我那么就讓他記錄七天 */
    if(fromData.rememberMe){
      VueCookies.set("loginInfo",loginInfo,'7d')
    }

最后得到cookie在頁面加載時(shí)顯示得到的賬號(hào)以及密碼

const init=()=>{
  const loginInfo= VueCookies.get('loginInfo');
  if (!loginInfo) {
    return
  }
  /* 轉(zhuǎn)成對(duì)象 */
  Object.assign(fromData,loginInfo)
}
init();

點(diǎn)擊登錄執(zhí)行的完整方法：

const login = () => {
  // 加載狀態(tài)
  loading.value = true;
  // elm自帶方法
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      loading.value = false;
      return;
    }
    // 得到賬號(hào)，密碼以及記住密碼
    let cookieLoginInfo = VueCookies.get("loginInfo");
    // cookie密碼為空的情況
    let cooliePassword =
      cookieLoginInfo == null ? null : cookieLoginInfo.password;
    // 如果輸入的密碼與cookie中存的密碼一致，那么就進(jìn)行加密
    if (formData.password !== cooliePassword) {
      formData.password = md5(formData.password);
    }
    // 封裝一個(gè)對(duì)象用來包含輸入的狀態(tài)，也就是賬號(hào)、密碼以及復(fù)選框
    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;
    }
    // 成功后自動(dòng)跳轉(zhuǎn)頁面
    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的使用方法的詳細(xì)內(nèi)容，更多關(guān)于Vue3 axios配置以及cookie的使用方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: