快捷導(dǎo)航

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

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

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

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

在Request.js也就是axios中添加切換驗證碼方法

  // 請求后攔截
  instants.interceptors.response.use(
    (response) => {
      if (showLoading && loading) {
        loading.close();
      }
      const responseData = response.data;
      if (responseData.status == "error") {
        // 如果觸發(fā)了errorCallback函數(shù)，那么就讓他切換驗證碼
        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的請求接口中使用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
        // 觸發(fā)驗證碼錯誤時切換驗證碼
      },errorCallback:()=>{
        changeCheckCode()
      }
    })
    if (result) {
      return;
    }
  })
}

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

Cookie使用方法

安裝cookie

 npm i vue-cookies --save

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

引入cookie

import VueCookies from 'vue-cookies';

存貯cookie

    const loginInfo = {
      account :params.account,
      password:params.password,
    }
    console.log(loginInfo);
    // 永不過期
    /* 如果得點擊記住密碼之后那么就讓他的狀態(tài)，也就是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
  }
  /* 轉(zhuǎn)成對象 */
  Object.assign(fromData,loginInfo)
}
init();

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

const login = () => {
  // 加載狀態(tài)
  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);
    }
    // 封裝一個對象用來包含輸入的狀態(tài)，也就是賬號、密碼以及復(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;
    }
    // 成功后自動跳轉(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的使用方法的詳細內(nèi)容，更多關(guān)于Vue3 axios配置以及cookie的使用方法的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: