亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄
vue3+ts+axios+pinia實現(xiàn)無感刷新
vue3無痛刷新（無感刷新）
實現(xiàn)過程
首頁 web前端 Vue.js 怎么使用vue3+ts+axios+pinia實現(xiàn)無感刷新

怎么使用vue3+ts+axios+pinia實現(xiàn)無感刷新

May 25, 2023 pm 03:37 PM
vue3 axios pinia

vue3+ts+axios+pinia實現(xiàn)無感刷新

1.先在項目中下載aiXos和pinia

npm i pinia --save
npm install axios --save

2.封裝axios請求-----

下載js-cookie

npm i JS-cookie -s
//引入aixos
import type { AxiosRequestConfig, AxiosResponse } from "axios";
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useUserInfoStore } from '@/stores/modules/UserInfo'
import router from '@/router';
import qs from 'qs';
import Cookie from "js-cookie";
let baseURL = "";
// console.log(process.env.NODE_ENV);//判斷環(huán)境
if (process.env.NODE_ENV === 'development') {
    baseURL = '/m.api'//后臺請求接口地址
} else {
    baseURL = 'http://xxxx.cn:8080';//這里是項目上線后的地址
   
}
declare interface TypeResponse extends AxiosResponse {
    /**
     * 錯誤號，200表示成功，10006令牌過期
     */
    errno: number,
    /**
     * 返回的信息
     */
    errmsg: string
}
 
//創(chuàng)建axios實例
 
const instance = axios.create({
    baseURL,  // 接口地址
    timeout: 3000,
    headers: {
        "Content-Type": 'application/x-www-form-urlencoded'
    }
 
});
 
 
//添加攔截器
instance.interceptors.request.use((config) => {
    // 在發(fā)送請求之前做些什么--給請求頭添加令牌token
    (config as any).headers['AdminToken'] = Cookie.get('token')//從cookie中拿token值，
//這里是使用了js-cookie插件。
    // console.log(config, "請求攔截器")
    return config
}, reeor => {
    // 對請求錯誤做些什么
    return Promise.reject(reeor);
});
// 需要無痛刷新的操作頁面
const METHOD_TYPE = ["_mt=edit", "_mt=create", "_mt=delete"]
// //響應攔截器
instance.interceptors.response.use(async (response: AxiosResponse) => {
    // 對響應數(shù)據(jù)做點什么
    let data = response.data;
    let { errno, errmsg } = data;
    console.log(response, "響應攔截器");
    let path = router.currentRoute.value.fullPath;//當前路由路徑
    if (10006 === errno) {
        const configData = response.config.data || ''
        // 判斷請求類型是否需要無痛刷新，index !== -1則需要無痛刷新
        let index = METHOD_TYPE.findIndex(item => configData.includes(item))
        if (-1 === index) {//需要重新登入獲取令牌
            router.replace({ path: "/login", query: { back: path } })//登入后需要跳回的地址
            return
        } else {//需要無痛刷新令牌
            const store = useUserInfoStore();
            const { username, password } = store.LoginInfo//在狀態(tài)管理里面定義一個loginInfo
            // 1.重新獲取令牌
            let loginData = { _gp: 'admin', _mt: 'login', username, password };
            const { errno, errmsg, data } = await post(loginData)//這里是通過async 將異步序列化改為同步
            if (200 == errno) {
                Cookie.set('token', data)//保存令牌
            } else {
                router.replace({ path: "/login", query: { back: path } })//登入后需要跳回的地址
                return Promise.reject({ errno, errmsg, data })
            }
            return instance.request(response.config)
        }
    // ElMessage.error(errmsg);//錯誤信息
    }
    return data;
}, reeor => {
    console.log(reeor);
 
    return Promise.reject(reeor);
})
 
function get(params?: object): Promise<TypeResponse> {
    return instance.get(&#39;&#39;, { params });
};
function post(data: object, params?: object): Promise<TypeResponse> {
    return instance.post(&#39;&#39;, qs.stringify(data), { params });
};
 
 
//暴露實列
export {
    post, get,
}

3.qs.stringify(data)是將請求的數(shù)據(jù)轉(zhuǎn)成表單格式，如果不需要直接去掉就可以了；

4.重新登錄后跳轉(zhuǎn)路由需要設(shè)置，不需要可以去掉

5。狀態(tài)管理--數(shù)據(jù)

下載持久化工具

npm install pinia-plugin-persistedstate --s

在main.js中配置持久化

//引入數(shù)據(jù)持久化插件
import piniaPluginPersistedstate from &#39;pinia-plugin-persistedstate&#39;;
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate);
app.use(pinia)
import { defineStore } from &#39;pinia&#39;
export const useUserInfoStore = defineStore(&#39;UserInfo&#39;, {
    state:() => ({
       
        LoginInfo:{
            username:&#39;&#39;,
            password:&#39;&#39;
        }
      }),
     
      persist:true;//狀態(tài)存儲持久化
})

6.登錄頁面--存儲表單數(shù)據(jù)，也就是用戶名和密碼

npm i lodash --s
import Cookies from &#39;js-cookie&#39;;//引入cookie
import * as _ from &#39;lodash&#39;;//防抖節(jié)流插件
import {post} from &#39;@/util&#39;;
import {useUserInfoStore} from &#39;@/stores/modules/UserInfo&#39; ;//用戶信息
import { useRouter,useRoute } from &#39;vue-router&#39; ;//引入路由
//這里是表單輸入的數(shù)據(jù)
const ruleForm = reactive({
    password: &#39;123456&#39;,
    username: &#39;admin&#39;
});
//請求接口數(shù)據(jù)
let data = {
    _gp: "admin",
    _mt: &#39;login&#39;,
    ...ruleForm
};
 
let LoginInfo = useUserInfoStore().LoginInfo;//狀態(tài)管理定義的數(shù)據(jù)
async function init() {
    await post(data).then((res:any) => {
        let { data: token, errno, errmsg } = res
        if (200 === errno) {
            let time = new Date() //設(shè)置過期時間
            time.setTime(time.getTime() + 1000 * 60 * 30)
            Cookies.set(&#39;token&#39;, token, { expires: time });
            Object.assign(LoginInfo,ruleForm)
            if (route.query.back) { //如果存在參數(shù)
             let paths = route.query.back+&#39;&#39;//拼接字符串
             console.log(paths);
             if (paths==&#39;/&#39;) {
//因為我的home是&#39;/&#39;,所有需要判斷
                router.replace(&#39;/Surface&#39;)//跳轉(zhuǎn)至主頁
                return
             }else{
                router.replace(paths)//則跳轉(zhuǎn)至進入登錄頁前的路由
             }
             
           } else {
            router.replace(&#39;/Surface&#39;)//否則跳轉(zhuǎn)至首頁
           }
            
        } else {
            ElMessage.error(errmsg)
        }
    }).catch((err:any) => {
        ElMessage.error(&#39;登錄異常！&#39;)
    })
    let info = {//用戶信息請求信息接口數(shù)據(jù)
        _gp: "admin",
        _mt: &#39;info&#39;,
    }
//下面這個函數(shù)是請求用戶信息的，不需要可以不寫
    await post(info).then((res:any) => {
        let {data} = res
        console.log(data);
        infos(data)
 
    }).catch((err:any)=>{
        ElMessage.error(&#39;登錄異常！&#39;)
    })
}
//防抖節(jié)流
const fangdou = _.debounce(init, 1500, {
    leading: true,  // 延長開始后調(diào)用
    trailing: false  // 延長結(jié)束前調(diào)用
})
//移除組件時，取消防抖
onUnmounted(() => {
    fangdou.cancel()
})

7.main.js設(shè)置路由守衛(wèi)

import Cookie from &#39;js-cookie&#39;
import router from &#39;./router&#39;//引入路由
 
//路由守衛(wèi)
router.beforeEach(async (to, from ) => {
    let tokent:string|undefined = Cookie.get(&#39;token&#39;)
    if (!tokent && to.path == &#39;/login&#39;) {
        return  true
    }
    // 沒有登錄，強制跳轉(zhuǎn)登錄頁
    if (!tokent && to.path !== &#39;/login&#39;) {
        router.replace({path:&#39;/login&#39;,query:{back:to.path}});
    }
    // 防止重復登錄
    if (tokent && to.path === &#39;/login&#39;) {
        return {
            path: from.path ? from.path : &#39;/Surface&#39;
        }
    }
    return true
})

大概就是這么多了

vue3無痛刷新（無感刷新）

無痛刷新的原理：當token過期后，在響應攔截器通過判斷重新進行登入請求

實現(xiàn)過程

在狀態(tài)管理state中定義一個loginInfo對象用于存儲用戶的賬號和密碼

//在狀態(tài)管理文件中
import { defineStore } from &#39;pinia&#39;
import Cookies from "js.cookie"
import {post} from &#39;@/http&#39;
 
import router from &#39;@/router&#39;;
import { ElMessage } from &#39;element-plus&#39;;
export const useUserStore = defineStore({
  id: "userStore",
  persist: {
    paths:[&#39;user&#39;]
  },//持久化
  state: () => ({
    loginInfo:{
      username:&#39;&#39;, 
      password:&#39;&#39;
    }
  }),
  getters: {},
  actions: {
    setUser(user:UserInfo) {
      this.user = user;
    },
    loginOut(){
      const data ={
        _gp:"admin",
        _mt:"logout"
      }
      post({},data).then((res:any)=>{
        let {errmsg,errno} = res
        if(200==errno){
          localStorage.removeItem("userStore")
          Cookies.remove("token")
          router.replace(&#39;/login&#39;)
          ElMessage.success(errmsg);
        }else{
          ElMessage.error(errmsg);
        }
      }).catch(res=>{
      console.log(res,"退出登入失敗");
      })
    }
  }
})

登入頁面中，在登入請求成功后將用戶的賬號和密碼存儲在狀態(tài)管理

//在登入頁面文件中
const data = { ...ruleForm, _gp: "admin", _mt: "login" }//轉(zhuǎn)換成字符串
post({}, data).then(res => {
    let { data: token, errmsg, errno } = res as any;//獲取登錄狀態(tài)
    if (200 == errno) {//登錄成功的判斷
        ElMessage.success("登錄成功!")//消息提示登錄成功
        let now = new Date();//獲取當前時間
        now.setTime(now.getTime() + 1000 * 60 * 30);//轉(zhuǎn)成時間類型
        Cookies.set("token", res.data, { expires: now })//獲取token存到cookie
        Object.assign(store.loginInfo, ruleForm)//將賬號密碼存儲到狀態(tài)管理
        return Promise.resolve(token)
    } else {
        ElMessage.error(errmsg);//登入失敗
        return Promise.reject(errmsg)
    }
})

3.在http中，先定義一個數(shù)組變量，該數(shù)組存放需要無痛刷新的操作如：刪除、添加、編輯

4.在響應攔截器中，判斷10006是否等于errno，如果相等說明令牌過期了，否則沒過期

5.令牌過期，獲取接口請求數(shù)據(jù)在定義的數(shù)組中查找判斷請求類型是否需要無痛刷新

6.index===-1則表示在數(shù)組中沒有找到也就不需要無痛刷新，直接跳到登入頁面進行登入

7.index！==-1則表示需要無痛刷新，將狀態(tài)管理中存儲的用戶賬號和密碼解構(gòu)出來，進行登入接口請求從而達到重新獲取令牌，進而達到不需要進入登入頁面就可以進行登入請求也就達到無痛刷新的效果

//在封裝的http文件中
import axios, { type AxiosResponse } from &#39;axios&#39;;
import qs from &#39;qs&#39;
import Cookies from "js.cookie"
import router from &#39;@/router&#39;;
import { ElMessage } from &#39;element-plus&#39;;
import { useUserStore } from &#39;@/stores/admin&#39;;
 
declare interface TypeResponse extends AxiosResponse {
    url(url: any): unknown;
    [x: string]: any;
    /**
     * 錯誤號，200表示成功，10006令牌過期
     */
    errno: number,
    /**
     * 失敗返回的消息
     */
    error: string,
    /**
     * 成功后返回的消息
    */
    errmsg: string
 
}
let baseURL = &#39;&#39;
 
if (process.env.NODE_ENV === "development") {
    baseURL = &#39;/m.api&#39;
} else {
    baseURL = "http://zxwyit.cn:8080/m.api"//上線后的路徑
}
 
const instance = axios.create({//創(chuàng)建實例
    baseURL,
    headers: { "content-type": "application/x-www-form-urlencoded" }
})
 
// 請求攔截器
instance.interceptors.request.use(function (config) {
    if (config.headers) {
        config.headers[&#39;AdminToken&#39;] = Cookies.get("token") + &#39;&#39;
    }
    return config
}, function (error) {
    console.error(&#39;請求錯誤&#39;, error)
    return Promise.reject(error)
}
)
// 無痛刷新的原理：當token過期后，在響應攔截器通過判斷重新進行登入請求
// 實現(xiàn)過程：
// 1.在狀態(tài)管理state中定義一個loginInfo對象用于存儲用戶的賬號和密碼
// 2.登入頁面中，在登入請求成功后將用戶的賬號和密碼存儲在狀態(tài)管理
// 3.在http中，先定義一個數(shù)組變量，該數(shù)組存放需要無痛刷新的操作如：刪除、添加、編輯
// 4.在響應攔截器中，判斷10006是否等于errno，如果相等說明令牌過期了，否則沒過期
// 5.令牌過期，獲取接口請求數(shù)據(jù)在定義的數(shù)組中查找判斷請求類型是否需要無痛刷新
// 6.index===-1則表示在數(shù)組中沒有找到也就不需要無痛刷新，直接跳到登入頁面進行登入
// 7.index！==-1則表示需要無痛刷新，將狀態(tài)管理中存儲的用戶賬號和密碼解構(gòu)出來，
// 進行登入接口請求從而達到重新獲取令牌，進而達到不需要進入登入頁面就可以進行登入請求也就達到無痛刷新的效果
 
// 需要無痛刷新的操作頁面
const METHOD_TYPE = ["_mt=edit", "_mt=create", "_mt=delete"]
// 響應攔截器
instance.interceptors.response.use(async function (response) {
    let data = response.data//強解
    let { errno, errmsg } = data//結(jié)構(gòu)賦值
    let path = router.currentRoute.value.fullPath//獲取路徑
    console.log(errno,&#39;errno&#39;);
    
    if (10006 == errno) {
        // 獲取接口請求數(shù)據(jù)
        const configData = response.config.data || &#39;&#39;
        // 判斷請求類型是否需要無痛刷新，index !== -1則需要無痛刷新
        let index = METHOD_TYPE.findIndex(item => configData.includes(item))
        if (-1 === index) {//需要重新登入獲取令牌
            router.replace({ path: "/login", query: { back: path } })//登入后需要跳回的地址
            return
        } else {//需要無痛刷新令牌
            const store = useUserStore();
            const { username, password } = store.loginInfo//在狀態(tài)管理里面定義一個loginInfo
            // 1.重新獲取令牌
            let loginData = { _gp: &#39;admin&#39;, _mt: &#39;login&#39;, username, password };
            const { errno, errmsg, data } = await post(loginData)//這里是通過async 將異步序列化改為同步
            if (200 == errno) {
 
                Cookies.set(&#39;token&#39;, data)//保存令牌
            } else {
        console.log(55);
 
                router.replace({ path: "/login", query: { back: path } })//登入后需要跳回的地址
                return Promise.reject({ errno, errmsg,data})
            }
            return instance.request(response.config)
        }
    }
    return data
}, function (error) {
    console.error(&#39;響應錯誤&#39;, error)
    return Promise.reject(error)
}
)
function get(params?: object): Promise<TypeResponse> {
    return instance.get("", { params })
}
function post(data: object, params?: object): Promise<TypeResponse> {
    return instance.post("", qs.stringify(data), { params })
}
 
/**
 * 富文本框圖片上傳請求
 */
export function upload(data: object): Promise<TypeResponse> {
    return instance.post("http://192.168.1.188:8080/upload/admin", data);
}
 
export { get, post }

以上是怎么使用vue3+ts+axios+pinia實現(xiàn)無感刷新的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！

本站聲明
本文內(nèi)容由網(wǎng)友自發(fā)貢獻，版權(quán)歸原作者所有，本站不承擔相應法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請聯(lián)系admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣服圖片

Undresser.AI Undress

Undresser.AI Undress

人工智能驅(qū)動的應用程序，用于創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用于從照片中去除衣服的在線人工智能工具。

Clothoff.io

Clothoff.io

AI脫衣機

Video Face Swap

Video Face Swap

使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的代碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級代碼編輯軟件(SublimeText3)

在Vue應用中使用axios時出現(xiàn)“Uncaught (in promise) Error: Request failed with status code 500”怎么辦？ 在Vue應用中使用axios時出現(xiàn)“Uncaught (in promise) Error: Request failed with status code 500”怎么辦？ Jun 24, 2023 pm 05:33 PM

在Vue應用中使用axios是十分常見的，axios是一種基于Promise的HTTP客戶端，可以用于瀏覽器和Node.js。在開發(fā)過程中，有時會出現(xiàn)“Uncaught(inpromise)Error:Requestfailedwithstatuscode500”的錯誤提示，對于開發(fā)者來說，這個錯誤提示可能有些難以理解和解決。本文將會探討這

在Vue應用中使用axios時出現(xiàn)“Error: Network Error”怎么解決？ 在Vue應用中使用axios時出現(xiàn)“Error: Network Error”怎么解決？ Jun 25, 2023 am 08:27 AM

在Vue應用中使用axios時出現(xiàn)“Error:NetworkError”怎么解決？在Vue應用的開發(fā)中，我們經(jīng)常會使用到axios進行API的請求或數(shù)據(jù)的獲取，但是有時我們會遇到axios請求出現(xiàn)“Error:NetworkError”的情況，這時我們該怎么辦呢？首先，需要了解“Error:NetworkError”是什么意思，它通常表示網(wǎng)絡連

Vue中數(shù)據(jù)請求的選擇：Axios or Fetch？ Vue中數(shù)據(jù)請求的選擇：Axios or Fetch？ Jul 17, 2023 pm 06:30 PM

Vue中數(shù)據(jù)請求的選擇：AxiosorFetch？在Vue開發(fā)中，處理數(shù)據(jù)請求是一個非常常見的任務。而選擇使用哪種工具來進行數(shù)據(jù)請求，則是一個需要考慮的問題。在Vue中，最常見的兩種工具是Axios和Fetch。本文將會比較這兩種工具的優(yōu)缺點，并給出一些示例代碼來幫助你做出選擇。Axios是一個基于Promise的HTTP客戶端，可以在瀏覽器和Node.

在Vue應用中使用axios時出現(xiàn)“TypeError: Failed to fetch”怎么辦？ 在Vue應用中使用axios時出現(xiàn)“TypeError: Failed to fetch”怎么辦？ Jun 24, 2023 pm 11:03 PM

最近，在使用Vue應用開發(fā)過程中，我遇到了一個常見的問題：“TypeError:Failedtofetch”錯誤提示。這個問題出現(xiàn)在使用axios進行HTTP請求時，后端服務器沒有正確響應請求時發(fā)生。這種錯誤提示通常表明請求無法到達服務器，可能是由于網(wǎng)絡原因或服務器未響應造成的。出現(xiàn)這個錯誤提示后，我們應該怎么辦呢？以下是一些解決方法：檢查網(wǎng)絡連接由于

Vue3中怎么實現(xiàn)選取頭像并裁剪 Vue3中怎么實現(xiàn)選取頭像并裁剪 May 29, 2023 am 10:22 AM

最終效果安裝VueCropper組件yarnaddvue-cropper@next上面的安裝值針對Vue3的，如果時Vue2或者想使用其他的方式引用，請訪問它的npm官方地址:官方教程。在組件中引用使用時也很簡單，只需要引入對應的組件和它的樣式文件，我這里沒有在全局引用，只在我的組件文件中引入import{userInfoByRequest}from'../js/api'import{VueCropper}from'vue-cropper&

在Vue應用中使用axios時出現(xiàn)“Error: timeout of xxxms exceeded”怎么辦？ 在Vue應用中使用axios時出現(xiàn)“Error: timeout of xxxms exceeded”怎么辦？ Jun 24, 2023 pm 03:27 PM

在Vue應用中使用axios時出現(xiàn)“Error:timeoutofxxxmsexceeded”怎么辦？隨著互聯(lián)網(wǎng)的快速發(fā)展，前端技術(shù)也在不斷地更新迭代，Vue作為一種優(yōu)秀的前端框架，近年來受到大家的歡迎。在Vue應用中，我們常常需要使用axios來進行網(wǎng)絡請求，但是有時候會出現(xiàn)“Error:timeoutofxxxmsexceeded”的錯誤

高效利用Vue和Axios實現(xiàn)前端數(shù)據(jù)的批量處理 高效利用Vue和Axios實現(xiàn)前端數(shù)據(jù)的批量處理 Jul 17, 2023 pm 10:43 PM

高效利用Vue和Axios實現(xiàn)前端數(shù)據(jù)的批量處理在前端開發(fā)中，數(shù)據(jù)的處理是一個常見的任務。當我們需要處理大量數(shù)據(jù)時，如果沒有有效的方法，處理數(shù)據(jù)將會變得十分繁瑣和低效。Vue是一種優(yōu)秀的前端框架，而Axios是一個流行的網(wǎng)絡請求庫，它們可以協(xié)同工作來實現(xiàn)前端數(shù)據(jù)的批量處理。本文將詳細介紹如何高效利用Vue和Axios來進行數(shù)據(jù)的批量處理，并提供相關(guān)的代碼示例

Vue實現(xiàn)文件上傳的完整指南（axios、element-ui） Vue實現(xiàn)文件上傳的完整指南（axios、element-ui） Jun 09, 2023 pm 04:12 PM

Vue實現(xiàn)文件上傳的完整指南（axios、element-ui）在現(xiàn)代Web應用程序中，文件上傳已經(jīng)成為一項基本的功能。無論是上傳頭像、圖片、文檔或者視頻，我們都需要一個可靠的方法來將文件從用戶的計算機上傳到服務器中。本文將為您提供一份詳細的指南，介紹如何使用Vue、axios和element-ui來實現(xiàn)文件上傳。什么是axiosaxios是一個基于prom

See all articles