Cara menggunakan vue3+ts+axios+pinia untuk mencapai penyegaran yang tidak masuk akal

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);//判断环境
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
}
 
//创建axios实例
 
const instance = axios.create({
    baseURL,  // 接口地址
    timeout: 3000,
    headers: {
        "Content-Type": 'application/x-www-form-urlencoded'
    }
 
});
 
 
//添加拦截器
instance.interceptors.request.use((config) => {
    // 在发送请求之前做些什么--给请求头添加令牌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) => {
    // 对响应数据做点什么
    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//在状态管理里面定义一个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) 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

//引入数据持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate);
app.use(pinia)

rrree

6 Nama pengguna dan kata laluan

import { defineStore } from 'pinia'
export const useUserInfoStore = defineStore('UserInfo', {
    state:() => ({
       
        LoginInfo:{
            username:'',
            password:''
        }
      }),
     
      persist:true;//状态存储持久化
})

7.main.js Sediakan pengawal penghalaan

npm i lodash --s
import Cookies from 'js-cookie';//引入cookie
import * as _ from 'lodash';//防抖节流插件
import {post} from '@/util';
import {useUserInfoStore} from '@/stores/modules/UserInfo' ;//用户信息
import { useRouter,useRoute } from 'vue-router' ;//引入路由
//这里是表单输入的数据
const ruleForm = reactive({
    password: '123456',
    username: 'admin'
});
//请求接口数据
let data = {
    _gp: "admin",
    _mt: 'login',
    ...ruleForm
};
 
let LoginInfo = useUserInfoStore().LoginInfo;//状态管理定义的数据
async function init() {
    await post(data).then((res:any) => {
        let { data: token, errno, errmsg } = res
        if (200 === errno) {
            let time = new Date() //设置过期时间
            time.setTime(time.getTime() + 1000 * 60 * 30)
            Cookies.set('token', token, { expires: time });
            Object.assign(LoginInfo,ruleForm)
            if (route.query.back) { //如果存在参数
             let paths = route.query.back+''//拼接字符串
             console.log(paths);
             if (paths=='/') {
//因为我的home是'/',所有需要判断
                router.replace('/Surface')//跳转至主页
                return
             }else{
                router.replace(paths)//则跳转至进入登录页前的路由
             }
             
           } else {
            router.replace('/Surface')//否则跳转至首页
           }
            
        } else {
            ElMessage.error(errmsg)
        }
    }).catch((err:any) => {
        ElMessage.error('登录异常！')
    })
    let info = {//用户信息请求信息接口数据
        _gp: "admin",
        _mt: 'info',
    }
//下面这个函数是请求用户信息的，不需要可以不写
    await post(info).then((res:any) => {
        let {data} = res
        console.log(data);
        infos(data)
 
    }).catch((err:any)=>{
        ElMessage.error('登录异常！')
    })
}
//防抖节流
const fangdou = _.debounce(init, 1500, {
    leading: true,  // 延长开始后调用
    trailing: false  // 延长结束前调用
})
//移除组件时，取消防抖
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'//引入路由
 
//路由守卫
router.beforeEach(async (to, from ) => {
    let tokent:string|undefined = Cookie.get('token')
    if (!tokent && to.path == '/login') {
        return  true
    }
    // 没有登录，强制跳转登录页
    if (!tokent && to.path !== '/login') {
        router.replace({path:'/login',query:{back:to.path}});
    }
    // 防止重复登录
    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

//在状态管理文件中
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" }//转换成字符串
post({}, data).then(res => {
    let { data: token, errmsg, errno } = res as any;//获取登录状态
    if (200 == errno) {//登录成功的判断
        ElMessage.success("登录成功!")//消息提示登录成功
        let now = new Date();//获取当前时间
        now.setTime(now.getTime() + 1000 * 60 * 30);//转成时间类型
        Cookies.set("token", res.data, { expires: now })//获取token存到cookie
        Object.assign(store.loginInfo, ruleForm)//将账号密码存储到状态管理
        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!