淘先锋技术网

首页 1 2 3 4 5 6 7

vue3+ts+axios+pinia实现无感刷新

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);//判断环境
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('', { params });
};
function post(data: object, params?: object): Promise<TypeResponse> {
    return instance.post('', qs.stringify(data), { params });
};


//暴露实列
export {
    post, get,
}

3.qs.stringify(data)是将请求的数据转成表单格式，如果不需要直接去掉就可以了；

4.重新登录后跳转路由需要设置，不需要可以去掉

5。状态管理--数据

下载持久化工具

npm install pinia-plugin-persistedstate --s

 在main.js中配置持久化

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

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

6.登录页面--存储表单数据，也就是用户名和密码

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()
})

7.main.js设置路由守卫

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
})

大概就是这么多，有什么问题可以直接问