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를 다운로드합니다. (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
})그렇습니다
무통 새로 고침의 원칙: 토큰이 만료되면 응답 인터셉터가 판단을 통해 로그인 요청을 다시 만듭니다
In에서 loginInfo 개체를 정의합니다. 사용자의 계정과 비밀번호를 저장하는 상태 관리 상태
//在状态管理文件中
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,"退出登入失败");
})
}
}
})로그인 페이지에서 로그인 요청이 성공한 후 사용자의 계정과 비밀번호가 상태 관리에 저장됩니다
//在登入页面文件中
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)
}
})3 http에서 먼저 Array 변수를 정의합니다. , 삭제, 추가, 편집과 같은 간편한 새로 고침이 필요한 작업을 저장합니다
4. 응답 인터셉터에서 10006이 errno와 같은지 확인합니다. 같으면 토큰이 만료된 것이고, 그렇지 않으면 만료되지 않은 것입니다
5. 토큰이 만료됩니다. 인터페이스 요청 데이터를 가져오고 정의된 배열에서 검색하여 요청 유형에 간편한 새로 고침이 필요한지 확인합니다.
6.index===-1은 해당 토큰이 배열에서 발견되지 않으며 간편한 새로 고침이 필요하지 않음을 의미합니다. . 로그인 페이지
7.index를 통해 로그인으로 바로 이동하세요! ==-1은 상태 관리에 저장된 사용자 계정과 비밀번호를 해체하고 토큰을 다시 얻기 위해 로그인 인터페이스를 요청한 다음 로그인 페이지에 들어가지 않고 로그인을 요청하는 등 고통 없는 새로 고침이 필요함을 의미합니다.
아아아아위 내용은 vue3+ts+axios+pinia를 사용하여 무의미한 새로 고침을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
