vue3+ts+axios+pinia mencapai penyegaran yang tidak masuk akal

1 Muat turun pertama aiXos dan pinia dalam projek

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

2 Merangkumkan permintaan axios-----

Muat turun 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'//后臺(tái)請(qǐng)求接口地址
} else {
    baseURL = 'http://xxxx.cn:8080';//這里是項(xiàng)目上線后的地址
   
}
declare interface TypeResponse extends AxiosResponse {
    /**
     * 錯(cuò)誤號(hào)，200表示成功，10006令牌過期
     */
    errno: number,
    /**
     * 返回的信息
     */
    errmsg: string
}
 
//創(chuàng)建axios實(shí)例
 
const instance = axios.create({
    baseURL,  // 接口地址
    timeout: 3000,
    headers: {
        "Content-Type": 'application/x-www-form-urlencoded'
    }
 
});
 
 
//添加攔截器
instance.interceptors.request.use((config) => {
    // 在發(fā)送請(qǐng)求之前做些什么--給請(qǐng)求頭添加令牌token
    (config as any).headers['AdminToken'] = Cookie.get('token')//從cookie中拿token值，
//這里是使用了js-cookie插件。
    // console.log(config, "請(qǐng)求攔截器")
    return config
}, reeor => {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(reeor);
});
// 需要無痛刷新的操作頁面
const METHOD_TYPE = ["_mt=edit", "_mt=create", "_mt=delete"]
// //響應(yīng)攔截器
instance.interceptors.response.use(async (response: AxiosResponse) => {
    // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
    let data = response.data;
    let { errno, errmsg } = data;
    console.log(response, "響應(yīng)攔截器");
    let path = router.currentRoute.value.fullPath;//當(dāng)前路由路徑
    if (10006 === errno) {
        const configData = response.config.data || ''
        // 判斷請(qǐng)求類型是否需要無痛刷新，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)管理里面定義一個(gè)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);//錯(cuò)誤信息
    }
    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 });
};
 
 
//暴露實(shí)列
export {
    post, get,
}

3.qs.stringify(data) menukar data yang diminta kepada format borang Jika tidak diperlukan, alih keluar terus

4 - Laluan lompatan perlu ditetapkan selepas log masuk. Jika tidak diperlukan, anda boleh mengalih keluar

5. Pengurusan negeri--data

Muat turun alat kegigihan

npm install pinia-plugin-persistedstate --s

Konfigurasikan kegigihan dalam main.js

//引入數(shù)據(jù)持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate);
app.use(pinia)

6 Nama pengguna dan kata laluan

import { defineStore } from 'pinia'
export const useUserInfoStore = defineStore('UserInfo', {
    state:() => ({
       
        LoginInfo:{
            username:'',
            password:''
        }
      }),
     
      persist:true;//狀態(tài)存儲(chǔ)持久化
})

7.main.js Sediakan pengawal penghalaan

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

Itu sahaja

vue3 muat semula tanpa rasa sakit (refresh tidak masuk akal)

prinsip penyegaran tanpa rasa sakit: apabila token tamat tempoh, pemintas respons membuat semula permintaan log masuk melalui pertimbangan

Proses pelaksanaan

Tentukan objek loginInfo dalam keadaan pengurusan negeri untuk menyimpan akaun pengguna dan kata laluan

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

Dalam halaman log masuk, selepas permintaan log masuk berjaya, akaun dan kata laluan pengguna disimpan dalam pengurusan status

//在狀態(tài)管理文件中
import { defineStore } from 'pinia'
import Cookies from "js.cookie"
import {post} from '@/http'
 
import router from '@/router';
import { ElMessage } from 'element-plus';
export const useUserStore = defineStore({
  id: "userStore",
  persist: {
    paths:['user']
  },//持久化
  state: () => ({
    loginInfo:{
      username:'', 
      password:''
    }
  }),
  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('/login')
          ElMessage.success(errmsg);
        }else{
          ElMessage.error(errmsg);
        }
      }).catch(res=>{
      console.log(res,"退出登入失敗");
      })
    }
  }
})

3 Dalam http, tentukan pembolehubah tatasusunan dahulu stores Operasi yang memerlukan muat semula tanpa rasa sakit termasuk: padam, tambah, edit

4 Dalam pemintas respons, tentukan sama ada 10006 sama dengan errno, token telah tamat tempoh, jika tidak, ia belum tamat tempoh

5. Apabila token tamat tempoh, dapatkan data permintaan antara muka dan cari dalam tatasusunan yang ditentukan untuk menentukan sama ada jenis permintaan perlu dimuat semula tanpa rasa sakit

6. index===-1 bermakna ia adalah tidak ditemui dalam tatasusunan, jadi tidak perlu memuat semulanya Muat semula dan melompat terus ke halaman log masuk untuk log masuk

7.index! ==-1 menunjukkan bahawa penyegaran yang tidak menyakitkan diperlukan Akaun pengguna dan kata laluan yang disimpan dalam pengurusan status dinyahkonstruk, dan permintaan antara muka log masuk dibuat untuk mendapatkan semula token, dan kemudian permintaan log masuk boleh dibuat tanpa memasukkan halaman log masuk. Kesan penyegaran yang tidak menyakitkan

//在登入頁面文件中
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();//獲取當(dāng)前時(shí)間
        now.setTime(now.getTime() + 1000 * 60 * 30);//轉(zhuǎn)成時(shí)間類型
        Cookies.set("token", res.data, { expires: now })//獲取token存到cookie
        Object.assign(store.loginInfo, ruleForm)//將賬號(hào)密碼存儲(chǔ)到狀態(tài)管理
        return Promise.resolve(token)
    } else {
        ElMessage.error(errmsg);//登入失敗
        return Promise.reject(errmsg)
    }
})

Atas ialah kandungan terperinci Cara menggunakan vue3+ts+axios+pinia untuk mencapai penyegaran yang tidak masuk akal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!